<!DOCTYPE html>
<html>
<head>
<title>第五阶段.md</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
 html{
    padding: 0 100px;
}
body {
	font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
	font-size: var(--vscode-markdown-font-size, 14px);
	padding: 0 26px;
	line-height: var(--vscode-markdown-line-height, 22px);
	word-wrap: break-word;
}

#code-csp-warning {
	position: fixed;
	top: 0;
	right: 0;
	color: white;
	margin: 16px;
	text-align: center;
	font-size: 12px;
	font-family: sans-serif;
	background-color:#444444;
	cursor: pointer;
	padding: 6px;
	box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}

#code-csp-warning:hover {
	text-decoration: none;
	background-color:#007acc;
	box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}

body.scrollBeyondLastLine {
	margin-bottom: calc(100vh - 22px);
}

body.showEditorSelection .code-line {
	position: relative;
}

body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -12px;
	height: 100%;
}

body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
	left: -30px;
}

.vscode-light.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.vscode-light.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(0, 0, 0, 0.40);
}

.vscode-light.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

.vscode-dark.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(255, 255, 255, 0.4);
}

.vscode-dark.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(255, 255, 255, 0.60);
}

.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

.vscode-high-contrast.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(255, 160, 0, 0.7);
}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(255, 160, 0, 1);
}

.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

img {
	max-width: 100%;
	max-height: 100%;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
}

hr {
	border: 0;
	height: 2px;
	border-bottom: 2px solid;
}

h1 {
	padding-bottom: 0.3em;
	line-height: 1.2;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

h1, h2, h3 {
	font-weight: normal;
}

table {
	border-collapse: collapse;
}

table > thead > tr > th {
	text-align: left;
	border-bottom: 1px solid;
}

table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
	padding: 5px 10px;
}

table > tbody > tr + tr > td {
	border-top: 1px solid;
}

blockquote {
	margin: 0 7px 0 5px;
	padding: 0 16px 0 10px;
	border-left-width: 5px;
	border-left-style: solid;
}

code {
	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
	font-size: 1em;
	line-height: 1.357em;
}

body.wordWrap pre {
	white-space: pre-wrap;
}

pre:not(.hljs),
pre.hljs code > div {
	padding: 16px;
	border-radius: 3px;
	overflow: auto;
}

pre code {
	color: var(--vscode-editor-foreground);
	tab-size: 4;
}

/** Theming */

.vscode-light pre {
	background-color: rgba(220, 220, 220, 0.4);
}

.vscode-dark pre {
	background-color: rgba(10, 10, 10, 0.4);
}

.vscode-high-contrast pre {
	background-color: rgb(0, 0, 0);
}

.vscode-high-contrast h1 {
	border-color: rgb(0, 0, 0);
}

.vscode-light table > thead > tr > th {
	border-color: rgba(0, 0, 0, 0.69);
}

.vscode-dark table > thead > tr > th {
	border-color: rgba(255, 255, 255, 0.69);
}

.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
	border-color: rgba(0, 0, 0, 0.18);
}

.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
	border-color: rgba(255, 255, 255, 0.18);
}

</style>

<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */

/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
	color: #8e908c;
}

/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
	color: #c82829;
}

/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
	color: #f5871f;
}

/* Tomorrow Yellow */
.hljs-attribute {
	color: #eab700;
}

/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
	color: #718c00;
}

/* Tomorrow Blue */
.hljs-title,
.hljs-section {
	color: #4271ae;
}

/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
	color: #8959a8;
}

.hljs {
	display: block;
	overflow-x: auto;
	color: #4d4d4c;
	padding: 0.5em;
}

.hljs-emphasis {
	font-style: italic;
}

.hljs-strong {
	font-weight: bold;
}
</style>

<style>
/*
 * Markdown PDF CSS
 */

 body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
	padding: 0 12px;
}

pre {
	background-color: #f8f8f8;
	border: 1px solid #cccccc;
	border-radius: 3px;
	overflow-x: auto;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

pre:not(.hljs) {
	padding: 23px;
	line-height: 19px;
}

blockquote {
	background: rgba(127, 127, 127, 0.1);
	border-color: rgba(0, 122, 204, 0.5);
}

.emoji {
	height: 1.4em;
}

code {
	font-size: 14px;
	line-height: 19px;
}

/* for inline code */
:not(pre):not(.hljs) > code {
	color: #C9AE75; /* Change the old color so it seems less like an error */
	font-size: inherit;
}

/* Page Break : use <div class="page"/> to insert page break
-------------------------------------------------------- */
.page {
	page-break-after: always;
}

</style>

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
  <script>
    mermaid.initialize({
      startOnLoad: true,
      theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
          ? 'dark'
          : 'default'
    });
  </script>
<h1 id="%E7%AC%AC%E4%B8%80%E5%A4%A9">第一天</h1>
<h1 id="%E4%B8%80%E8%AF%BE%E7%A8%8B%E5%AE%89%E6%8E%92">一、课程安排</h1>
<pre class="hljs"><code><div>1-5 小程序基础
6-8 云菜谱（云开发）
9  uni-app基础  跨平台
10-11  小U商城  
12-14  数据可视化（d3.js和echarts）
15 笔试+答辩
</div></code></pre>
<h1 id="%E4%BA%8C%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%B9%B3%E5%8F%B0">二、微信公众平台</h1>
<h2 id="1%E5%B9%B3%E5%8F%B0%E6%A6%82%E8%BF%B0">1.平台概述</h2>
<p>微信公众平台，简称公众号，是开发者通过公众号为用户提供咨询和服务的平台</p>
<p>官网：https://mp.weixin.qq.com/</p>
<pre class="hljs"><code><div>mini program  小程序
</div></code></pre>
<h2 id="2%E8%B4%A6%E5%8F%B7%E5%88%86%E7%B1%BB">2.账号分类</h2>
<p>账号分类： 订阅号、服务号、企业微信（企业号）、小程序</p>
<pre class="hljs"><code><div>服务号：偏向服务类的交互（H5网站）;注册主体不能是个人；1个月推送4条消息
订阅号：注册主体是个人；每天推送1条
企业微信：主要是上班族使用
</div></code></pre>
<h1 id="%E4%B8%89%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F">三、微信小程序</h1>
<h2 id="1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A6%82%E8%BF%B0">1.小程序概述</h2>
<pre class="hljs"><code><div>小程序是一种新的开放能力，开发者可以快速地开发一个小程序。
小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
</div></code></pre>
<h2 id="2%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BC%98%E7%BC%BA%E7%82%B9">2.小程序优缺点</h2>
<h3 id="21%E4%BC%98%E7%82%B9">2.1优点</h3>
<pre class="hljs"><code><div>1.推广成本低
2.开发成本低，学习门槛低
3.使用体验出色（比h5体验要好）
</div></code></pre>
<h3 id="22%E7%BC%BA%E7%82%B9">2.2缺点</h3>
<pre class="hljs"><code><div>1.2M ---&gt;20M   小：功能简单，更多用来做商城
2.上线审核非常严格
</div></code></pre>
<h2 id="3%E6%B3%A8%E5%86%8C%E8%8C%83%E5%9B%B4">3.注册范围</h2>
<p>个人、企业、媒体、组织。个人是可以注册的</p>
<h2 id="4%E6%B3%A8%E5%86%8C%E6%B5%81%E7%A8%8B">4.注册流程</h2>
<p>1.有一个邮箱</p>
<p>2.上传身份证</p>
<p>3.绑定微信（微信得绑定银行卡）</p>
<p>4.后台服务类目：不要选游戏</p>
<h2 id="5%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86">5.后台管理</h2>
<h3 id="51%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF">5.1基本信息</h3>
<p>版本管理：</p>
<ul>
<li>​	开发版本：体验版（自己、项目成员、体验成员）</li>
<li>​	审核版本：微信审核团队</li>
<li>​	线上版本：所有人都可以访问</li>
</ul>
<h3 id="52%E6%88%90%E5%91%98%E7%AE%A1%E7%90%86">5.2成员管理</h3>
<ul>
<li>管理员：老大，拥有最高权限</li>
<li>项目成员：帮自己干活的。运营、开发、数据分析</li>
<li>体验成员：只能体验（测试人员、领导）</li>
</ul>
<h3 id="53-appid">5.3 appID</h3>
<p>开发/开发管理/开发设置</p>
<p>appid：对小程序的唯一标志  				国家</p>
<p>openid: 对小程序中用户的唯一标志      国家里面的人</p>
<h3 id="54-%E5%90%88%E6%B3%95%E5%9F%9F%E5%90%8D">5.4 合法域名</h3>
<p>在小程序后台里面添加的域名，就是合法域名。</p>
<p>没有添加就是非法域名。</p>
<p>非法域名在小程序里面不允许访问。</p>
<h2 id="6%E5%B7%A5%E5%85%B7%E5%AE%89%E8%A3%85">6.工具安装</h2>
<p>工具下载</p>
<p>地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</p>
<h2 id="7%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA">7.项目创建</h2>
<p><img src="images/image-20210303085711096.png" alt="image-20210303085711096"></p>
<h2 id="%E5%B7%A5%E5%85%B7%E4%BB%8B%E7%BB%8D">工具介绍</h2>
<p><img src="images/image-20210303100755890.png" alt="image-20210303100755890"></p>
<p>编辑器颜色：</p>
<p><img src="images/image-20210303100856735.png" alt="image-20210303100856735"></p>
<h3 id="%E8%B0%83%E6%95%B4%E5%AD%97%E4%BD%93">调整字体</h3>
<p><img src="images/image-20210303100951344.png" alt="image-20210303100951344"></p>
<h3 id="%E7%BC%96%E8%AF%91%E6%A8%A1%E5%BC%8F">编译模式</h3>
<p>类似浏览器的地址栏</p>
<h3 id="%E4%B8%8D%E6%A0%A1%E9%AA%8C%E5%90%88%E6%B3%95%E5%9F%9F%E5%90%8D">不校验合法域名</h3>
<p><img src="images/image-20210303102637715.png" alt="image-20210303102637715"></p>
<h3 id="%E8%B0%83%E8%AF%95%E5%99%A8">调试器</h3>
<p><img src="images/image-20210303102947263.png" alt="image-20210303102947263"></p>
<h2 id="8%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84">8.目录结构</h2>
<h3 id="81%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84">8.1目录结构</h3>
<p><img src="images/image-20210303110423311.png" alt="image-20210303110423311"></p>
<p>必须的文件：app.js  app.json和页面文件</p>
<h3 id="82%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84">8.2自定义目录结构</h3>
<h2 id="9%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%85%8D%E7%BD%AE">9.小程序配置</h2>
<h3 id="%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AEappjson">全局配置app.json</h3>
<blockquote>
<p>​	注意：配置文件中不能有注释</p>
</blockquote>
<h4 id="pages%E9%85%8D%E7%BD%AE%E9%A1%B9">pages配置项</h4>
<p>多余的逗号不能有；页面路径最前的斜杠不能有；注释不能有</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"pages"</span>: [
    <span class="hljs-string">"pages/index/index"</span>,
    <span class="hljs-string">"pages/detail/detail"</span>,
    <span class="hljs-string">"pages/setting/setting"</span>
  ]
}
</div></code></pre>
<h4 id="entrypagepath">entryPagePath</h4>
<p>指定首页，权重最高。</p>
<h4 id="window">window</h4>
<p>导航栏样式：</p>
<p><img src="images/image-20210303145141548.png" alt="image-20210303145141548"></p>
<h4 id="tab%E6%A0%8F">tab栏</h4>
<p><img src="images/image-20210303150536303.png" alt="image-20210303150536303"></p>
<blockquote>
<p>​	页面路径前面不能有/，图片路径前面是可以有/</p>
</blockquote>
<pre class="hljs"><code><div>{
    <span class="hljs-attr">"tabBar"</span>: {
        <span class="hljs-attr">"color"</span>: <span class="hljs-string">"#666"</span>,
        <span class="hljs-attr">"selectedColor"</span>: <span class="hljs-string">"#ff0000"</span>,
        <span class="hljs-attr">"list"</span>: [{
            <span class="hljs-attr">"pagePath"</span>: <span class="hljs-string">"pages/index/index"</span>,
            <span class="hljs-attr">"text"</span>: <span class="hljs-string">"首页"</span>,
            <span class="hljs-attr">"iconPath"</span>: <span class="hljs-string">"/images/home.png"</span>,
            <span class="hljs-attr">"selectedIconPath"</span>: <span class="hljs-string">"/images/home-selected.png"</span>
        },{
            <span class="hljs-attr">"pagePath"</span>: <span class="hljs-string">"pages/setting/setting"</span>,
            <span class="hljs-attr">"text"</span>: <span class="hljs-string">"设置"</span>,
            <span class="hljs-attr">"iconPath"</span>: <span class="hljs-string">"/images/setting.png"</span>,
            <span class="hljs-attr">"selectedIconPath"</span>: <span class="hljs-string">"/images/setting-selected.png"</span>
        }],
        <span class="hljs-attr">"borderStyle"</span>: <span class="hljs-string">"black"</span>,
        <span class="hljs-attr">"backgroundColor"</span>: <span class="hljs-string">"#fff"</span>,
        <span class="hljs-attr">"position"</span>: <span class="hljs-string">"bottom"</span>
    }
}
</div></code></pre>
<h3 id="92%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AEpagejson">9.2页面配置page.json</h3>
<blockquote>
<p>​	配置项和app.json下的window的配置项对应；不能写window，直接写配置项</p>
</blockquote>
<p>pages/setting/setting.json</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"usingComponents"</span>: {
    <span class="hljs-attr">"mpHeader"</span>:<span class="hljs-string">"../../components/header/header"</span>
  },
  <span class="hljs-attr">"navigationBarBackgroundColor"</span>: <span class="hljs-string">"#03b2ff"</span>,
  <span class="hljs-attr">"navigationBarTitleText"</span>: <span class="hljs-string">"天气预报"</span>,
  <span class="hljs-attr">"navigationBarTextStyle"</span>: <span class="hljs-string">"black"</span>,
  <span class="hljs-attr">"backgroundColor"</span>: <span class="hljs-string">"#dd4f43"</span>,
  <span class="hljs-attr">"backgroundTextStyle"</span>: <span class="hljs-string">"light"</span>

}
</div></code></pre>
<h3 id="93sitemapjson">9.3sitemap.json</h3>
<p>matching的值：</p>
<ul>
<li>
<p>exact：页面参数不能多，也不能少</p>
<p>index页面只有一个参数age的时候，被索引；其他情况都不被所以</p>
</li>
</ul>
<pre class="hljs"><code><div>{
  &quot;rules&quot;: [
    {
      &quot;action&quot;: &quot;allow&quot;,
      &quot;page&quot;: &quot;pages/index/index&quot;,
      &quot;params&quot;: [&quot;age&quot;],
      &quot;matching&quot;: &quot;exact&quot;
    },
    {
      &quot;action&quot;: &quot;disallow&quot;,
      &quot;page&quot;: &quot;*&quot;
    }
  ]
}
</div></code></pre>
<ul>
<li>
<p>inclusive：页面的参数包含params中的参数，页面被索引</p>
<p>index页面的参数包含age，页面就会被索引</p>
</li>
</ul>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"rules"</span>: [
    {
      <span class="hljs-attr">"action"</span>: <span class="hljs-string">"allow"</span>,
      <span class="hljs-attr">"page"</span>: <span class="hljs-string">"pages/index/index"</span>,
      <span class="hljs-attr">"params"</span>: [<span class="hljs-string">"age"</span>],
      <span class="hljs-attr">"matching"</span>: <span class="hljs-string">"inclusive"</span>
    },
    {
      <span class="hljs-attr">"action"</span>: <span class="hljs-string">"disallow"</span>,
      <span class="hljs-attr">"page"</span>: <span class="hljs-string">"*"</span>
    }
  ]
}
</div></code></pre>
<ul>
<li>
<p>exclusive:没有交集的时候，页面被索引</p>
<p>页面参数中没有age参数的时候，页面被索引</p>
</li>
</ul>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"rules"</span>: [
    {
      <span class="hljs-attr">"action"</span>: <span class="hljs-string">"allow"</span>,
      <span class="hljs-attr">"page"</span>: <span class="hljs-string">"pages/index/index"</span>,
      <span class="hljs-attr">"params"</span>: [<span class="hljs-string">"age"</span>],
      <span class="hljs-attr">"matching"</span>: <span class="hljs-string">"exclusive"</span>
    },
    {
      <span class="hljs-attr">"action"</span>: <span class="hljs-string">"disallow"</span>,
      <span class="hljs-attr">"page"</span>: <span class="hljs-string">"*"</span>
    }
  ]
}
</div></code></pre>
<ul>
<li>
<p>partial:只要有交集，页面就被索引</p>
<p>页面参数只要有sex或name，就被索引；否则不被索引</p>
</li>
</ul>
<pre class="hljs"><code><div>{
  &quot;rules&quot;: [
    {
      &quot;action&quot;: &quot;allow&quot;,
      &quot;page&quot;: &quot;pages/index/index&quot;,
      &quot;params&quot;: [&quot;sex&quot;,&quot;name&quot;],
      &quot;matching&quot;: &quot;partial&quot;
    },
    {
      &quot;action&quot;: &quot;disallow&quot;,
      &quot;page&quot;: &quot;*&quot;
    }
  ]
}
</div></code></pre>
<h2 id="10%E5%9C%BA%E6%99%AF%E5%80%BC">10.场景值</h2>
<h3 id="101%E5%9C%BA%E6%99%AF%E5%80%BC%E6%A6%82%E8%BF%B0">10.1场景值概述</h3>
<p>场景值用来描述用户进入小程序的路径.</p>
<p>通俗，就是当前用户通过什么方式进入到小程序的，比如【扫描二维码、搜索、最近的使用列表等】</p>
<p>场景值：  当前场景的标识！！！</p>
<h3 id="102%E8%8E%B7%E5%8F%96%E5%9C%BA%E6%99%AF%E5%80%BC">10.2获取场景值</h3>
<p>对于小程序，可以在 <code>App</code> 的 <code>onLaunch</code> 和 <code>onShow</code>，或<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/app/life-cycle/wx.getLaunchOptionsSync.html">wx.getLaunchOptionsSync</a> 中获取上述场景值。</p>
<h2 id="appjs">app.js</h2>
<ul>
<li>onLaunch：小程序初始化</li>
<li>onShow：页面显示</li>
<li>onHide：页面隐藏</li>
<li>onError：捕获错误</li>
<li>onPageNotFound：页面没有找到，进行重定向</li>
</ul>
<p>app.js</p>
<pre class="hljs"><code><div><span class="hljs-comment">//注册小程序</span>
App({
  onLaunch(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"---onLaunch--"</span>)
  },
  onShow(){
    <span class="hljs-comment">// console.log(a)</span>
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"----onShow-----"</span>)
  },
  onHide(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"----onHide-----"</span>)
  },
  onError(e){
    <span class="hljs-built_in">console</span>.log(e,<span class="hljs-string">"------onError-------"</span>)
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"----onError-------"</span>)
  },
  onPageNotFound(){
    <span class="hljs-comment">// console.log("-----onPageNotFound------")</span>
    wx.navigateTo({
      <span class="hljs-attr">url</span>: <span class="hljs-string">'/pages/detail/detail'</span>,
    })
  }
})
</div></code></pre>
<h2 id="11%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95">11.基础语法</h2>
<h3 id="111%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8F%8A%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93">11.1数据绑定及列表渲染</h3>
<p>pages/list/list.wxml</p>
<p>wx:for   被循环的变量</p>
<p>wx:for-item  循环的每一项起别名</p>
<p>wx:for-index   循环的每一项下标起别名</p>
<pre class="hljs"><code><div>&lt;!-- 列表循环 --&gt;
&lt;view wx:for=&quot;{{arr}}&quot; wx:for-index=&quot;myIndex&quot; wx:for-item=&quot;myItem&quot; wx:key=&quot;id&quot;&gt;
  {{myIndex}}-----{{myItem}}
&lt;/view&gt;
</div></code></pre>
<p>循环对象数组</p>
<p>wx:key不能写item.id，写成字符串：id</p>
<p>pages/list/list.js</p>
<pre class="hljs"><code><div>
Page({
  data:{
    message:&quot;北京你好&quot;,
    num:100,
    arr:['北京','上海','广州','深圳'],
    users:[
      {id:1001,name:&quot;八戒&quot;,weight:200},
      {id:1002,name:&quot;悟空&quot;,weight:70},
      {id:1003,name:&quot;沙和尚&quot;,weight:160}
    ]
  }
})
</div></code></pre>
<p>pages/list/list.wxml</p>
<pre class="hljs"><code><div>
&lt;view wx:for=&quot;{{users}}&quot; wx:key=&quot;id&quot;&gt;
  姓名：{{item.name}}  体重：{{item.weight}}
&lt;/view&gt;
</div></code></pre>
<h3 id="112%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A">11.2事件绑定</h3>
<h3 id="113%E7%AE%80%E5%8D%95%E6%A0%B7%E5%BC%8F">11.3简单样式</h3>
<h2 id="12%E8%AF%BE%E5%90%8E%E4%BD%9C%E4%B8%9A">12.课后作业</h2>
<p>*.选项卡操作</p>
<p>*.京东页面布局</p>
<p>​		首页商品展示，购物车页面展示</p>
<p>*.预习逻辑层、视图层内容</p>
<p>事件绑定：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html</p>
<h1 id="%E7%AC%AC%E4%BA%8C%E5%A4%A9">第二天</h1>
<h1 id="%E4%B8%80%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%80%BB%E8%BE%91%E5%B1%82">一、小程序逻辑层</h1>
<h2 id="1%E6%A6%82%E8%BF%B0">1.概述</h2>
<p>在 <code>JavaScript</code> 的基础上，我们增加了一些功能，以方便小程序的开发：</p>
<ul>
<li>增加 <code>App</code> 和 <code>Page</code> 方法，进行<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html">程序注册</a>和<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html">页面注册</a>。</li>
<li>增加 <code>getApp</code> 和 <code>getCurrentPages</code> 方法，分别用来获取 <code>App</code> 实例和当前页面栈。</li>
<li>提供丰富的 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html">API</a>，如微信用户数据，扫一扫，支付等微信特有能力。</li>
<li>提供<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html#%E6%A8%A1%E5%9D%97%E5%8C%96">模块化</a>能力，每个页面有独立的<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html#%E6%96%87%E4%BB%B6%E4%BD%9C%E7%94%A8%E5%9F%9F">作用域</a>。</li>
</ul>
<p><strong>注意：小程序框架的逻辑层并非运行在浏览器中，因此 <code>JavaScript</code> 在 web 中一些能力都无法使用，如 <code>window</code>，<code>document</code> 等。</strong></p>
<h2 id="2%E4%BA%8B%E4%BB%B6%E7%B3%BB%E7%BB%9F">2.事件系统</h2>
<p>事件就是视图层（wxml）到逻辑层（js）的通讯方式，同时能够携带参数！！！</p>
<h3 id="%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A">事件绑定</h3>
<blockquote>
<p>​	绑定事件用bindtap,传递参数用id和data-*</p>
</blockquote>
<p><img src="images/image-20210304091544657.png" alt="image-20210304091544657"></p>
<p>pages/index/index.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"myClick"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"1001"</span>&gt;</span>点击<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"handleClick"</span> <span class="hljs-attr">data-user-name</span>=<span class="hljs-string">"张三"</span> <span class="hljs-attr">data-age</span>=<span class="hljs-string">"21"</span>&gt;</span>通过data传递<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
</div></code></pre>
<p>pages/index/index.js</p>
<pre class="hljs"><code><div>Page({
  <span class="hljs-attr">data</span>:{

  },
  myClick(e){
    <span class="hljs-keyword">let</span> id=e.currentTarget.id;
    <span class="hljs-comment">// console.log(id)</span>
    <span class="hljs-comment">// console.log(e)</span>
    <span class="hljs-comment">// console.log("---我被点击了----")</span>
  },
  <span class="hljs-comment">//通过data传递参数</span>
  handleClick(e){
    <span class="hljs-comment">// console.log(e)</span>
    <span class="hljs-comment">//接收参数</span>
    <span class="hljs-comment">// let username=e.currentTarget.dataset.username;</span>
    <span class="hljs-comment">// let age=e.currentTarget.data.age;</span>
    <span class="hljs-comment">// let {username,age}=e.currentTarget.dataset;</span>
    <span class="hljs-comment">// console.log(username,age)</span>

    <span class="hljs-built_in">console</span>.log(e)

  }

})
</div></code></pre>
<h3 id="%E4%BA%8B%E4%BB%B6%E7%B1%BB%E5%9E%8B">事件类型</h3>
<ul>
<li>tap 点击之后马上离开</li>
<li>touchstart    触摸开始</li>
<li>touchmove   触摸移动</li>
<li>touchend      触摸结束</li>
<li>touchcancel   来电、弹窗打断动作</li>
<li>longpress        长按</li>
</ul>
<h3 id="%E7%BB%91%E5%AE%9A%E7%B1%BB%E5%9E%8B">绑定类型</h3>
<p><img src="images/image-20210304100107237.png" alt="image-20210304100107237"></p>
<ul>
<li>
<p>bind  可以冒泡</p>
</li>
<li>
<p>catch  不可以冒泡</p>
<p>pages/index/index.wxml</p>
<pre class="hljs"><code><div>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"outer"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"outerClick"</span>&gt;</span>
  outer
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"middle"</span> <span class="hljs-attr">catchtap</span>=<span class="hljs-string">"middleClick"</span>&gt;</span>
    middle
    <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"inner"</span> <span class="hljs-attr">catchtap</span>=<span class="hljs-string">"innerClick"</span>&gt;</span>inner<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<p>pages/index/index.js</p>
<pre class="hljs"><code><div>Page({
  outerClick(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"---outer-----"</span>)
  },
  middleClick(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"---middle-----"</span>)
  },
  innerClick(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"---inner-----"</span>)
  }
})
</div></code></pre>
<h3 id="%E6%90%BA%E5%B8%A6%E5%8F%82%E6%95%B0">携带参数</h3>
<p>currentTarget：冒泡触发的事件，所携带的参数</p>
<p>target：直接触发的事件，所携带的参数</p>
<p><img src="images/image-20210304101245774.png" alt="image-20210304101245774"></p>
</li>
</ul>
<p>pages/index/index.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"outer"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"handleOuter"</span> <span class="hljs-attr">data-username</span>=<span class="hljs-string">"outer张三"</span>&gt;</span>
  outer
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"inner"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"handleInner"</span> <span class="hljs-attr">data-username</span>=<span class="hljs-string">"innner李四"</span>&gt;</span>inner<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<p>pages/index/index.js</p>
<pre class="hljs"><code><div>  handleOuter(e){
    <span class="hljs-comment">// console.log("---handleOuter---")</span>
    <span class="hljs-built_in">console</span>.log(e,<span class="hljs-string">"--outer--"</span>)
  },
  handleInner(e){
    <span class="hljs-built_in">console</span>.log(e,<span class="hljs-string">"---inner----"</span>)

  }
</div></code></pre>
<h3 id="%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%AE%9A%E4%B9%89">事件的定义</h3>
<p>pages/list/list.wxml</p>
<pre class="hljs"><code><div>&lt;button type=&quot;primary&quot; bindtap=&quot;myClick&quot;&gt;点击&lt;/button&gt;
</div></code></pre>
<p>pages/list/list.js</p>
<pre class="hljs"><code><div>Page({
    <span class="hljs-comment">//es5</span>
  <span class="hljs-attr">myClick</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-comment">//指向页面实例</span>
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>,<span class="hljs-string">"----es5-----"</span>)
  },
    <span class="hljs-comment">//es6</span>
  myClick(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>,<span class="hljs-string">"---es6------"</span>)
  },
    <span class="hljs-comment">//箭头</span>
  <span class="hljs-attr">myClick</span>:<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>,<span class="hljs-string">"----箭头函数-----"</span>)
  }
})
</div></code></pre>
<h3 id="data%E7%9A%84%E8%B5%8B%E5%80%BC">data的赋值</h3>
<p>this.data.username=&quot;张三&quot;</p>
<p>this.setData({</p>
<p>username:&quot;张三&quot;</p>
<p>})</p>
<pre class="hljs"><code><div>Page({
  <span class="hljs-attr">data</span>:{
    <span class="hljs-attr">message</span>:<span class="hljs-string">"hello beijing"</span>,
    <span class="hljs-attr">page</span>:<span class="hljs-number">1</span>
  },
  handleChange(){
    <span class="hljs-comment">//只修改逻辑层的data</span>
    <span class="hljs-keyword">this</span>.data.message=<span class="hljs-string">"你好，北京"</span>;

    <span class="hljs-comment">//修改逻辑层的data，并渲染到页面</span>
    <span class="hljs-keyword">this</span>.setData({
      <span class="hljs-attr">message</span>:<span class="hljs-string">"你好，北京"</span>
    })
  }
})
</div></code></pre>
<h2 id="3%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2page">3.注册页面page</h2>
<h3 id="31%E6%B3%A8%E5%86%8Cpage">3.1注册page</h3>
<pre class="hljs"><code><div>Page({
	onLoad(){
	.....
	}
})
</div></code></pre>
<h3 id="32data%E5%B1%9E%E6%80%A7">3.2data属性</h3>
<pre class="hljs"><code><div>Page({
	data:{
		username:&quot;张三&quot;
	},
	myClick(){
		this.test()
	},
	test(){
	
	}
})
</div></code></pre>
<h3 id="33%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F">3.3生命周期</h3>
<pre class="hljs"><code><div>onLoad		页面加载
onShow		页面显示
onHide		页面隐藏
onReady		页面渲染完成
onUnload		页面卸载：列表页跳转详情页，详情页回退，在详情页会执行onUnload
onReachBottom		页面触底
onPullDownRefresh			下拉刷新
onShareAppMessage		页面分享
onShareTimeline			分次向到朋友圈
</div></code></pre>
<h3 id="34%E5%85%B6%E4%BB%96%E5%87%BD%E6%95%B0">3.4其他函数</h3>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="4app%E6%B3%A8%E5%86%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E4%BE%8B">4.App注册小程序实例</h2>
<h3 id="41%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F">4.1生命周期</h3>
<pre class="hljs"><code><div>onShow		页面显示
onLaunch 	小程序初始化
onHide		页面隐藏
onError		捕获错误
onPageNotFound		页面找不到
</div></code></pre>
<h3 id="44-page%E9%A1%B5%E9%9D%A2%E8%8E%B7%E5%8F%96%E5%BA%94%E7%94%A8%E5%AE%9E%E4%BE%8B">4.4 page页面获取应用实例</h3>
<p>/app.js</p>
<pre class="hljs"><code><div>App({
  <span class="hljs-attr">globalData</span>: {
    <span class="hljs-attr">username</span>: <span class="hljs-string">"张三丰"</span>
  }
})

</div></code></pre>
<p>pages/life/life.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">const</span> app=getApp()
</div></code></pre>
<h1 id="%E4%BA%8C%E8%A7%86%E5%9B%BE%E5%B1%82">二、视图层</h1>
<p>框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。</p>
<p>将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。</p>
<p>WXML(WeiXin Markup language) 用于描述页面的结构。</p>
<p>WXS(WeiXin Script) 是小程序的一套脚本语言，结合 <code>WXML</code>，可以构建出页面的结构。</p>
<p>WXSS(WeiXin Style Sheet) 用于描述页面的样式。</p>
<p>组件(Component)是视图的基本组成单元。</p>
<h2 id="1wxml%E8%AF%AD%E6%B3%95">1.wxml语法</h2>
<h3 id="11%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A">1.1数据绑定</h3>
<pre class="hljs"><code><div>{{}}
</div></code></pre>
<h3 id="12%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93">1.2列表渲染</h3>
<p>大括号和引号之间不要有空格，不然会把arr转换成字符串进行运算，类似于wx:for=&quot;{{arr+''}}&quot;</p>
<pre class="hljs"><code><div>wx:for=&quot;{{arr}}&quot;
wx:for-item=&quot;myItem&quot;
wx:for-index=&quot;myIndex&quot;
wx:key=&quot;id&quot;
</div></code></pre>
<p>wx:key的形式：</p>
<ol>
<li>字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。</li>
<li>保留关键字 <code>*this</code> 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。</li>
</ol>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- block不是一个组件，是一个包裹元素 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">block</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{arr}}"</span> <span class="hljs-attr">wx:key</span>=<span class="hljs-string">"*this"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{item}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">block</span>&gt;</span>
</div></code></pre>
<p>block是一个包裹元素，并不是一个组件</p>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- block不是一个组件，是一个包裹元素 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">block</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{arr}}"</span> <span class="hljs-attr">wx:key</span>=<span class="hljs-string">"*this"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{item}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">block</span>&gt;</span>
</div></code></pre>
<h3 id="13%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93">1.3条件渲染</h3>
<p>wx:if</p>
<p>wx:elif</p>
<p>wx:else</p>
<p>pages/my/my.js</p>
<pre class="hljs"><code><div>Page({
  <span class="hljs-attr">data</span>:{
    <span class="hljs-attr">username</span>:<span class="hljs-string">"wangwu"</span>
  }
})
</div></code></pre>
<p>pages/my/my.wxml</p>
<pre class="hljs"><code><div>
<span class="hljs-comment">&lt;!-- 条件判断 --&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{username=='zhangsan'}}"</span>&gt;</span>张三<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:elif</span>=<span class="hljs-string">"{{username=='lisi'}}"</span>&gt;</span>李四<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:else</span>&gt;</span>不认识<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>

</div></code></pre>
<p>wx:if和hidden 控制页面显示和隐藏。hidden保留页面结构，wx:if不保留页面结构</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box"</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{false}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">"{{!tag}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<h3 id="14%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8">1.4模板/引用</h3>
<ul>
<li>
<p>定义模板：template  设置name属性</p>
</li>
<li>
<p>引用模板：template  设置is</p>
</li>
<li>
<p>引入模板外面的内容：include</p>
<p>代码：</p>
<p>pages/setting/setting.wxml</p>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- 引入模板 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../public/public.wxml"</span> /&gt;</span>

<span class="hljs-comment">&lt;!-- 使用模板，通过data传递数据 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">is</span>=<span class="hljs-string">"myItem"</span> <span class="hljs-attr">data</span>=<span class="hljs-string">"{{arr}}"</span>/&gt;</span>


<span class="hljs-comment">&lt;!-- 使用模板footer --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">is</span>=<span class="hljs-string">"footer"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-comment">&lt;!-- 引用非模板结构 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">include</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../public/public.wxml"</span> /&gt;</span>
</div></code></pre>
<p>定义模板</p>
<p>/public/public.wxml</p>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- 定义模板，设置name属性 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"myItem"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{arr}}"</span> <span class="hljs-attr">wx:key</span>=<span class="hljs-string">"*this"</span>&gt;</span>
    {{item}}
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-comment">&lt;!-- 一个wxml文件中，可以定义多个template --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"footer"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>this is footer<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>


<span class="hljs-comment">&lt;!-- 没有放在template中 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
  this is content
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
</li>
</ul>
<h3 id="15-%E6%A8%A1%E6%9D%BF-%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC">1.5 模板-解构赋值</h3>
<p>pages/setting/setting.js</p>
<pre class="hljs"><code><div>Page({
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">arr</span>: [<span class="hljs-string">'北京'</span>, <span class="hljs-string">'上海'</span>, <span class="hljs-string">'广州'</span>, <span class="hljs-string">'深圳'</span>],
    <span class="hljs-attr">users</span>: [
      { <span class="hljs-attr">id</span>: <span class="hljs-number">1001</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">" 八戒"</span>, <span class="hljs-attr">weight</span>: <span class="hljs-number">200</span> },
      { <span class="hljs-attr">id</span>: <span class="hljs-number">1002</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"悟空"</span>, <span class="hljs-attr">weight</span>: <span class="hljs-number">80</span> },
      { <span class="hljs-attr">id</span>: <span class="hljs-number">1003</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"唐僧"</span>, <span class="hljs-attr">weight</span>: <span class="hljs-number">120</span> },
      { <span class="hljs-attr">id</span>: <span class="hljs-number">1004</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"沙和尚"</span>, <span class="hljs-attr">weight</span>: <span class="hljs-number">180</span> }
    ]
  }
})
</div></code></pre>
<p>pages/setting/setting.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{users}}"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">is</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">data</span>=<span class="hljs-string">"{{...item}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<h2 id="2wxss%E6%A0%B7%E5%BC%8F">2.wxss样式</h2>
<h3 id="21%E6%96%B0%E7%9A%84%E7%89%B9%E6%80%A7">2.1新的特性</h3>
<ul>
<li>rpx：reponsive pixel   响应式像素</li>
</ul>
<p>无论什么设备，宽度都为750rpx.</p>
<p>拿到设计图，用ps调整图片宽度为750px就可以了</p>
<pre class="hljs"><code><div>ctrl+Alt+i    调整图像宽度和高度
ctrl+r        显示标尺
</div></code></pre>
<p>样式引入</p>
<pre class="hljs"><code><div>@import &quot;../../public/public.wxss&quot;;
</div></code></pre>
<h1 id="%E4%B8%89%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6">三、原生组件</h1>
<h3 id="view%E7%BB%84%E4%BB%B6">view组件</h3>
<ul>
<li>hover-class  点击态</li>
<li>hover-stop-propagation   阻止点击态冒泡</li>
<li>hover-start-time</li>
<li>hover-stay-time</li>
</ul>
<p>pages/demo1/demo1.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box"</span> <span class="hljs-attr">hover-class</span>=<span class="hljs-string">"box-hover"</span> <span class="hljs-attr">hover-start-time</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">hover-stay-time</span>=<span class="hljs-string">"3000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>

<span class="hljs-comment">&lt;!-- 阻止样式冒泡 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"outer"</span> <span class="hljs-attr">hover-class</span>=<span class="hljs-string">"hover"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"inner"</span> <span class="hljs-attr">hover-class</span>=<span class="hljs-string">"hover"</span> <span class="hljs-attr">hover-stop-propagation</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<p>pages/demo1/demo1.wxss</p>
<pre class="hljs"><code><div>

<span class="hljs-selector-class">.box</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">400</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">400</span>rpx;
  <span class="hljs-attribute">background</span>: red;
}
<span class="hljs-comment">/* hover-class写在class后面 */</span>
<span class="hljs-selector-class">.box-hover</span>{
  <span class="hljs-attribute">background</span>: purple;
}

<span class="hljs-comment">/*阻止样式冒泡*/</span>
<span class="hljs-selector-class">.outer</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">400</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">400</span>rpx;
  <span class="hljs-attribute">background</span>: red;
}

<span class="hljs-selector-class">.inner</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">200</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">200</span>rpx;
  <span class="hljs-attribute">background</span>: green;
}

<span class="hljs-selector-class">.hover</span>{
  <span class="hljs-attribute">background</span>: orange;
}


</div></code></pre>
<h3 id="swiper%E7%BB%84%E4%BB%B6">swiper组件</h3>
<ul>
<li>indicator-dots</li>
<li>indicator-color</li>
<li>indicator-active-color</li>
<li>autoplay</li>
<li>circular</li>
<li>vertical</li>
<li>duration</li>
<li>interval</li>
</ul>
<p><img src="images/image-20210304161746170.png" alt="image-20210304161746170"></p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">swiper</span> <span class="hljs-attr">indicator-dots</span>=<span class="hljs-string">"{{true}}"</span> <span class="hljs-attr">indicator-color</span>=<span class="hljs-string">"#fff"</span> <span class="hljs-attr">indicator-active-color</span>=<span class="hljs-string">"#ff0000"</span> <span class="hljs-attr">autoplay</span>=<span class="hljs-string">"{{true}}"</span> <span class="hljs-attr">interval</span>=<span class="hljs-string">"5000"</span> <span class="hljs-attr">duration</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">vertical</span>=<span class="hljs-string">"{{false}}"</span> <span class="hljs-attr">circular</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">swiper-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/001.jpg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">swiper-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">swiper-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/002.jpg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">swiper-item</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">swiper-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/003.jpg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">swiper-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">swiper</span>&gt;</span>
</div></code></pre>
<h3 id="text%E6%96%87%E6%9C%AC%E7%BB%84%E4%BB%B6">text文本组件</h3>
<ul>
<li>space:ensp | emsp |nbsp</li>
<li>user-select:true | false</li>
<li>decode: true |false</li>
</ul>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- 普通文本 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">space</span>=<span class="hljs-string">"ensp"</span> <span class="hljs-attr">user-select</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span>北京     越来越暖和<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">space</span>=<span class="hljs-string">"emsp"</span>&gt;</span>北京     越来越暖和<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">space</span>=<span class="hljs-string">"nbsp"</span>&gt;</span>北京     越来越暖和<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>

<span class="hljs-comment">&lt;!-- 转译字符 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">decode</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span><span class="hljs-symbol">&amp;nbsp;</span> <span class="hljs-symbol">&amp;lt;</span> <span class="hljs-symbol">&amp;gt;</span> <span class="hljs-symbol">&amp;amp;</span> <span class="hljs-symbol">&amp;apos;</span> <span class="hljs-symbol">&amp;ensp;</span> <span class="hljs-symbol">&amp;emsp;</span><span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<h3 id="icon%E5%9B%BE%E6%A0%87">icon图标</h3>
<p><img src="images/image-20210304165525195.png" alt="image-20210304165525195"></p>
<pre class="hljs"><code><div>&lt;icon type=&quot;success&quot; size=&quot;132&quot; color=&quot;red&quot;&gt;&lt;/icon&gt;
&lt;icon type=&quot;success_no_circle&quot; size=&quot;132&quot; color=&quot;green&quot;&gt;&lt;/icon&gt;
&lt;icon type=&quot;search&quot; size=&quot;60&quot; color=&quot;green&quot;&gt;&lt;/icon&gt;
</div></code></pre>
<h3 id="rich-text-%E5%AF%8C%E6%96%87%E6%9C%AC">rich-text 富文本</h3>
<p>含有html标签的就是富文本</p>
<p><img src="images/image-20210304170132931.png" alt="image-20210304170132931"></p>
<pre class="hljs"><code><div>&lt;!-- 富文本 --&gt;
&lt;rich-text space=&quot;emsp&quot; nodes='&lt;div style=&quot;color:red;background:orange;&quot;&gt;马上    可以吃饭了&lt;/div&gt;'&gt;

&lt;/rich-text&gt;
</div></code></pre>
<h1 id="%E7%AC%AC%E4%B8%89%E5%A4%A9">第三天</h1>
<h1 id="%E4%B8%80%E7%BB%84%E4%BB%B6">一、组件</h1>
<h2 id="1%E8%A7%86%E5%9B%BE%E5%AE%B9%E5%99%A8%E7%BB%84%E4%BB%B6">1.视图容器组件</h2>
<h3 id="1view-%E8%A7%86%E5%9B%BE%E5%AE%B9%E5%99%A8">(1)view 视图容器</h3>
<pre class="hljs"><code><div>class
hover-class 	放在class后面
hover-stay-time
hover-start-time
</div></code></pre>
<h3 id="2swiperswiper-item-%E6%BB%91%E5%9D%97%E8%A7%86%E5%9B%BE%E5%AE%B9%E5%99%A8">(2)swiper/swiper-item 滑块视图容器</h3>
<p>注意事项:</p>
<ul>
<li>
<p>swiper里面必须要有swiper-item</p>
<p><img src="images/image-20210305101008681.png" alt="image-20210305101008681"></p>
</li>
</ul>
<p><strong>封装，改变点的样式</strong></p>
<ul>
<li>轮播图切换的时候，会触发bindchange事件，获取下标</li>
<li>把下标current渲染到视图层</li>
<li>视图层用三元表达式，给dot添加样式</li>
</ul>
<p><strong>点击点点，切换轮播图</strong></p>
<ul>
<li>点击点点，触发dotClick事件，获取下标current</li>
<li>把下标渲染到页面</li>
<li>swiper的current属性进行改变</li>
</ul>
<p>代码案例：</p>
<p>pages/dot/dot.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">swiper</span> <span class="hljs-attr">bindchange</span>=<span class="hljs-string">"itemChange"</span> <span class="hljs-attr">autoplay</span>=<span class="hljs-string">"{{false}}"</span> <span class="hljs-attr">current</span>=<span class="hljs-string">"{{current}}"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">swiper-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item item1"</span>&gt;</span>001<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">swiper-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">swiper-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item item2"</span>&gt;</span>002<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">swiper-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">swiper-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item item3"</span>&gt;</span>003<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">swiper-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">swiper</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"footer"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dot {{current==0?'active':''}}"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"dotClick"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"0"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dot {{current==1?'active':''}}"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"dotClick"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dot {{current==2?'active':''}}"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"dotClick"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<p>pages/dot/dot.js</p>
<pre class="hljs"><code><div>Page({
    <span class="hljs-attr">data</span>: {
        <span class="hljs-attr">current</span>: <span class="hljs-number">0</span>
    },
    <span class="hljs-comment">/*轮播图切换，触发事件*/</span>			
    itemChange(e) {
        <span class="hljs-comment">//切换到第几个</span>
        <span class="hljs-keyword">let</span> current = e.detail.current;
        <span class="hljs-keyword">this</span>.setData({
            current
        })
    },
    <span class="hljs-comment">// 点击点点</span>
    dotClick(e){
        <span class="hljs-comment">//点击的第几个</span>
        <span class="hljs-keyword">let</span> current=e.currentTarget.id;
        <span class="hljs-comment">//渲染到视图层</span>
        <span class="hljs-keyword">this</span>.setData({
            current
        })
    }
})
</div></code></pre>
<p>pages/dot/dot.wxss</p>
<pre class="hljs"><code><div><span class="hljs-comment">/* pages/dot/dot.wxss */</span>
<span class="hljs-selector-class">.item</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">750</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">400</span>rpx;

}
<span class="hljs-selector-class">.item1</span>{
  <span class="hljs-attribute">background</span>: tomato;
}
<span class="hljs-selector-class">.item2</span>{
  <span class="hljs-attribute">background</span>: green;
}
<span class="hljs-selector-class">.item3</span>{
  <span class="hljs-attribute">background</span>: yellow;
}

<span class="hljs-comment">/* 底部样式 */</span>
<span class="hljs-selector-class">.footer</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">300</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">50</span>rpx;
  <span class="hljs-comment">/* background: violet; */</span>
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">justify-content</span>: space-around;
  <span class="hljs-attribute">align-items</span>: center;
}
<span class="hljs-selector-class">.dot</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">30</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">30</span>rpx;
  <span class="hljs-attribute">background</span>: gray;
}

<span class="hljs-comment">/* 父相子绝 */</span>
<span class="hljs-selector-class">.container</span>{
  <span class="hljs-attribute">position</span>: relative;
}
<span class="hljs-selector-class">.footer</span>{
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">left</span>: <span class="hljs-number">225</span>rpx;
  <span class="hljs-attribute">bottom</span>: <span class="hljs-number">20</span>rpx;
}
<span class="hljs-selector-class">.active</span>{
  <span class="hljs-attribute">background</span>: white;
}
</div></code></pre>
<h3 id="3scroll-view%E6%BB%9A%E5%8A%A8%E8%A7%86%E5%9B%BE">(3)scroll-view滚动视图</h3>
<p><img src="images/image-20210305104946596.png" alt="image-20210305104946596"></p>
<p><strong>横向滚动</strong>：</p>
<ul>
<li>scroll-x设置为true</li>
<li>父元素：white-space:nowrap;</li>
<li>子元素：display:inline-block;</li>
</ul>
<p>代码案例：</p>
<p>pages/scrollView/scrollView.wxml</p>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- 水平滚动 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">scroll-view</span> <span class="hljs-attr">scroll-x</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item item1"</span> &gt;</span>001<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item item2"</span> &gt;</span>002<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item item3"</span> &gt;</span>003<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">scroll-view</span>&gt;</span>
</div></code></pre>
<p>pages/scrollView/scrollView.wxss</p>
<pre class="hljs"><code><div><span class="hljs-comment">/* pages/dot/dot.wxss */</span>
<span class="hljs-selector-class">.item</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">750</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">400</span>rpx;

}
<span class="hljs-selector-class">.item1</span>{
  <span class="hljs-attribute">background</span>: tomato;
}
<span class="hljs-selector-class">.item2</span>{
  <span class="hljs-attribute">background</span>: green;
}
<span class="hljs-selector-class">.item3</span>{
  <span class="hljs-attribute">background</span>: yellow;
}


<span class="hljs-comment">/* 父元素 */</span>
<span class="hljs-selector-tag">scroll-view</span>{
  <span class="hljs-attribute">white-space</span>: nowrap;
}
<span class="hljs-comment">/* 子元素 */</span>
<span class="hljs-selector-class">.item</span>{
  <span class="hljs-attribute">display</span>: inline-block;
}
</div></code></pre>
<p><strong>纵向滚动</strong>：</p>
<p><img src="images/image-20210305105315713.png" alt="image-20210305105315713"></p>
<p>注意点：</p>
<ul>
<li>scroll-y设置为true</li>
<li>父元素通过wxss设置一个高度</li>
</ul>
<p>代码案例：</p>
<p>pages/vertical/vertical.wxml</p>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- 纵向滚动 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">scroll-view</span> <span class="hljs-attr">scroll-y</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item item1"</span>&gt;</span>001<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item item2"</span>&gt;</span>002<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item item3"</span>&gt;</span>003<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">scroll-view</span>&gt;</span>
</div></code></pre>
<p>pages/vertical/vertical.wxss</p>
<pre class="hljs"><code><div><span class="hljs-comment">/* pages/dot/dot.wxss */</span>
<span class="hljs-selector-class">.item</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">750</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">400</span>rpx;

}
<span class="hljs-selector-class">.item1</span>{
  <span class="hljs-attribute">background</span>: tomato;
}
<span class="hljs-selector-class">.item2</span>{
  <span class="hljs-attribute">background</span>: green;
}
<span class="hljs-selector-class">.item3</span>{
  <span class="hljs-attribute">background</span>: yellow;
}

<span class="hljs-comment">/* 纵向滚动，给父元素一个高度 */</span>
<span class="hljs-selector-tag">scroll-view</span>{
  <span class="hljs-attribute">height</span>: <span class="hljs-number">400</span>rpx;
}
</div></code></pre>
<h2 id="2%E8%BF%9B%E5%BA%A6%E6%9D%A1">2.进度条</h2>
<p><img src="images/image-20210305110102061.png" alt="image-20210305110102061"></p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">progress</span> <span class="hljs-attr">percent</span>=<span class="hljs-string">"60"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">border-radius</span>=<span class="hljs-string">"15"</span> <span class="hljs-attr">show-info</span>=<span class="hljs-string">"{{true}}"</span> <span class="hljs-attr">activeColor</span>=<span class="hljs-string">"red"</span> <span class="hljs-attr">backgroundColor</span>=<span class="hljs-string">"orange"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">progress</span>&gt;</span>
</div></code></pre>
<h2 id="2%E5%9B%BE%E7%89%87%E7%BB%84%E4%BB%B6-image">2.图片组件  image</h2>
<table>
<thead>
<tr>
<th>lazy-load</th>
<th>boolean</th>
<th>false</th>
<th>否</th>
<th>图片懒加载，在即将进入一定范围（上下三屏）时才开始加载</th>
<th><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.5.0</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>string</td>
<td></td>
<td>否</td>
<td>图片资源地址</td>
<td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td>
</tr>
<tr>
<td>show-menu-by-longpress</td>
<td>boolean</td>
<td>false</td>
<td>否</td>
<td>开启长按图片显示识别小程序码菜单</td>
<td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">2.7.0</a></td>
</tr>
<tr>
<td>binderror</td>
<td>eventhandle</td>
<td></td>
<td>否</td>
<td>当错误发生时触发，event.detail = {errMsg}</td>
<td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td>
</tr>
<tr>
<td>bindload</td>
<td>eventhandle</td>
<td></td>
<td>否</td>
<td>当图片载入完毕时触发，event.detail = {height, width}</td>
<td></td>
</tr>
</tbody>
</table>
<p><img src="images/image-20210305111355822.png" alt="image-20210305111355822"></p>
<p>代码案例：</p>
<p>pages/demo/demo.wxml</p>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- 图片组件 --&gt;</span>
<span class="hljs-comment">&lt;!-- scaleToFill:会变形 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"boy"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/boy.jpg"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"scaleToFill"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>

<span class="hljs-comment">&lt;!-- aspectFit:不变形，长边完全显示 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"boy"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/boy.jpg"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"aspectFit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>

<span class="hljs-comment">&lt;!-- aspectFill:不变形，短边完全显示 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"boy"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/boy.jpg"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"aspectFill"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
</div></code></pre>
<h2 id="3%E8%A1%A8%E5%8D%95%E7%BB%84%E4%BB%B6">3.表单组件</h2>
<h3 id="1input%E8%BE%93%E5%85%A5%E6%A1%86">(1)input输入框</h3>
<p>type:</p>
<ul>
<li>​	text  		文本键盘</li>
<li>​	number  数字键盘</li>
<li>​	idcard	身份证输入键盘</li>
<li>​	digit		带小数点的数字键盘</li>
</ul>
<p>代码案例：</p>
<pre class="hljs"><code><div>  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>姓名<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"realname"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<h3 id="2radio%E5%8D%95%E9%80%89radio-group%E7%BB%84">(2)radio单选/radio-group组</h3>
<p>name赋给radio-group</p>
<p>代码案例：</p>
<pre class="hljs"><code><div>  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> &gt;</span>性别<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">radio-group</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">radio</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{true}}"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span>&gt;</span>男<span class="hljs-tag">&lt;/<span class="hljs-name">radio</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2"</span>&gt;</span>女<span class="hljs-tag">&lt;/<span class="hljs-name">radio</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">radio-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<h3 id="3checkboxcheckbox-group%E7%BB%84%E4%BB%B6">(3)checkbox/checkbox-group组件</h3>
<p>name赋给checkbox-group</p>
<p>代码案例：</p>
<pre class="hljs"><code><div>  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">""</span>&gt;</span>爱好<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">checkbox-group</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"hobby"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">checkbox</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span>&gt;</span>学习<span class="hljs-tag">&lt;/<span class="hljs-name">checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2"</span>&gt;</span>吃饭<span class="hljs-tag">&lt;/<span class="hljs-name">checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"3"</span>&gt;</span>打游戏<span class="hljs-tag">&lt;/<span class="hljs-name">checkbox</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">checkbox-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<h3 id="4swicth%E5%BC%80%E5%85%B3">(4)swicth开关</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>  &lt;view&gt;
    请阅读协议
    &lt;switch type=&quot;checkbox&quot;&gt;&lt;/switch&gt;
  &lt;/view&gt;
</div></code></pre>
<h3 id="5picker%E7%BB%84%E4%BB%B6">(5)picker组件</h3>
<p>mode:</p>
<ul>
<li>​	selector				单列选择器</li>
<li>​	multiSelector  多列选择器</li>
<li>​	time		时间</li>
<li>​	date		日期</li>
<li>​	region	省市区</li>
</ul>
<p>代码案例：</p>
<pre class="hljs"><code><div>  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">""</span>&gt;</span>住址<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">picker</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"address"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{address}}"</span> <span class="hljs-attr">bindchange</span>=<span class="hljs-string">"addressSelect"</span>&gt;</span>请选择：{{address}}<span class="hljs-tag">&lt;/<span class="hljs-name">picker</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<h3 id="6form%E6%8F%90%E4%BA%A4">(6)form提交</h3>
<p><strong>Tips</strong></p>
<pre class="hljs"><code><div> button设置form-type=&quot;submit&quot;
 form绑定bindsubmit=&quot;mysubmit&quot;
</div></code></pre>
<p><img src="images/image-20210305141603233.png" alt="image-20210305141603233"></p>
<p>代码案例：</p>
<p>pages/form/form.js</p>
<pre class="hljs"><code><div>Page({
  <span class="hljs-attr">data</span>:{
    <span class="hljs-attr">address</span>:[]
  },
  <span class="hljs-comment">//选择地址</span>
  addressSelect(e){
    <span class="hljs-keyword">this</span>.setData({
      <span class="hljs-attr">address</span>:e.detail.value
    })
  },
  <span class="hljs-comment">//提交表单</span>
  mySubmit(e){
    <span class="hljs-built_in">console</span>.log(e)
  }
})
</div></code></pre>
<p>pages/form/form.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">bindsubmit</span>=<span class="hljs-string">"mySubmit"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>姓名<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"realname"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> &gt;</span>性别<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">radio-group</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">radio</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{true}}"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span>&gt;</span>男<span class="hljs-tag">&lt;/<span class="hljs-name">radio</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2"</span>&gt;</span>女<span class="hljs-tag">&lt;/<span class="hljs-name">radio</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">radio-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">""</span>&gt;</span>爱好<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">checkbox-group</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"hobby"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">checkbox</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span>&gt;</span>学习<span class="hljs-tag">&lt;/<span class="hljs-name">checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2"</span>&gt;</span>吃饭<span class="hljs-tag">&lt;/<span class="hljs-name">checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"3"</span>&gt;</span>打游戏<span class="hljs-tag">&lt;/<span class="hljs-name">checkbox</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">checkbox-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">""</span>&gt;</span>住址<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">picker</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"address"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{address}}"</span> <span class="hljs-attr">bindchange</span>=<span class="hljs-string">"addressSelect"</span>&gt;</span>请选择：{{address}}<span class="hljs-tag">&lt;/<span class="hljs-name">picker</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">""</span>&gt;</span>介绍<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"intro"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">""</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入简介"</span> <span class="hljs-attr">maxlength</span>=<span class="hljs-string">"-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
    请阅读协议
    <span class="hljs-tag">&lt;<span class="hljs-name">switch</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">switch</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"mini"</span> <span class="hljs-attr">form-type</span>=<span class="hljs-string">"submit"</span>&gt;</span>提交<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
</div></code></pre>
<h2 id="4%E5%AF%BC%E8%88%AA">4.导航</h2>
<h3 id="41%E5%A3%B0%E6%98%8E%E5%BC%8F%E5%AF%BC%E8%88%AA%E7%BB%84%E4%BB%B6">4.1声明式导航（组件）</h3>
<p><strong>navigator组件</strong></p>
<p>open-type:</p>
<ul>
<li>​	navigate   跳转普通页；可以回退</li>
<li>​	redirect	跳转普通页；不能回退</li>
<li>​	switchTab	跳转tabbar页面；不能回退</li>
<li>​	reLaunch 	打开任意页面；不能回退</li>
<li>​	navigateBack   回退</li>
</ul>
<p>总结：</p>
<ul>
<li>普通页：navigate、redirect、reLaunch</li>
<li>tabBar页面:switchTab、reLaunch</li>
</ul>
<blockquote>
<p>页面跳转携带的参数，只能在onLoad里面接收</p>
</blockquote>
<pre class="hljs"><code><div>Page({
  onLoad(e){
    <span class="hljs-built_in">console</span>.log(e)
  }
})
</div></code></pre>
<p><strong>语法参考</strong></p>
<p>代码案例:</p>
<p>pages/index/index.wxml</p>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- navigate:跳转普通页，可以回退 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/detail/detail?id=1001"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"navigate"</span>&gt;</span>detail页面<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span>

<span class="hljs-comment">&lt;!-- redirect:跳转普通页面，不能回退 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/detail/detail"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"redirect"</span>&gt;</span>detail页面<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span>
<span class="hljs-comment">&lt;!-- reLaunch:跳转所有页面，不能回退 --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/detail/detail"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"reLaunch"</span>&gt;</span>detail页面<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/my/my"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"reLaunch"</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span>

<span class="hljs-comment">&lt;!-- switchTab：跳转tabbar页面 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/my/my"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"switchTab"</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"navigate"</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/my/my"</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span>
</div></code></pre>
<p>pages/detail/detail.wxml</p>
<pre class="hljs"><code><div>detail页面
<span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"navigateBack"</span>&gt;</span>回退<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span>
</div></code></pre>
<p>app.json</p>
<pre class="hljs"><code><div>{
    <span class="hljs-attr">"tabBar"</span>: {
        <span class="hljs-attr">"selectedColor"</span>: <span class="hljs-string">"#ff0000"</span>,
        <span class="hljs-attr">"list"</span>: [
            {
                <span class="hljs-attr">"pagePath"</span>: <span class="hljs-string">"pages/index/index"</span>,
                <span class="hljs-attr">"text"</span>: <span class="hljs-string">"首页"</span>,
                <span class="hljs-attr">"iconPath"</span>: <span class="hljs-string">"/images/home.png"</span>,
                <span class="hljs-attr">"selectedIconPath"</span>: <span class="hljs-string">"/images/home-selected.png"</span>
            },
            {
                <span class="hljs-attr">"pagePath"</span>: <span class="hljs-string">"pages/my/my"</span>,
                <span class="hljs-attr">"text"</span>: <span class="hljs-string">"我的"</span>,
                <span class="hljs-attr">"iconPath"</span>: <span class="hljs-string">"/images/my.png"</span>,
                <span class="hljs-attr">"selectedIconPath"</span>: <span class="hljs-string">"/images/my-selected.png"</span>
            }
        ]
    },
}
</div></code></pre>
<h3 id="42%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AAapi">4.2编程式导航（api）</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>wx.navigateTo   跳转普通页面；可以回退
wx.redirectTo   跳转普通页面；不可以回退
wx.reLaunch		所有页面；不可回退；可以携带参数
wx.switchTab	跳转tabBar页面；不能回退；不能携带参数
wx.navigateBack	页面回退
</div></code></pre>
<h3 id="43%E9%A1%B5%E9%9D%A2%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0">4.3页面传递参数</h3>
<p><strong>声明式传递参数</strong></p>
<p>代码案例：</p>
<pre class="hljs"><code><div>&lt;!-- navigate:跳转普通页，可以回退 --&gt;
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/detail/detail?id=1001"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"navigate"</span>&gt;</span>detail页面<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span></span>
</div></code></pre>
<p><strong>编程式传递参数</strong>：</p>
<p>代码案例：</p>
<pre class="hljs"><code><div>Page({
  redirectDetail(){
    wx.redirectTo({
      <span class="hljs-attr">url</span>: <span class="hljs-string">'/pages/detail/detail?username=张三'</span>,
    })
  },
  switchMy(){
    wx.switchTab({
      <span class="hljs-attr">url</span>: <span class="hljs-string">'/pages/my/my?username=八戒'</span>,
    })
  },
  relaunchMy(){
    wx.reLaunch({
      <span class="hljs-attr">url</span>: <span class="hljs-string">'/pages/my/my?username=悟空'</span>,
    })
  }
})
</div></code></pre>
<p><strong>接参：</strong></p>
<p>只能在onLoad函数中接受参数</p>
<p>代码案例</p>
<pre class="hljs"><code><div>Page({
  onLoad(e){
    console.log(e)
  },
})
</div></code></pre>
<h3 id="44%E8%B7%B3%E8%BD%AC%E5%88%B0%E5%85%B6%E4%BB%96%E5%B0%8F%E7%A8%8B%E5%BA%8F">4.4跳转到其他小程序</h3>
<p>navigator组件，跳转到其它小程序</p>
<ul>
<li>target设置成miniprogram</li>
<li>app-id:，目标小程序的appid</li>
<li>path（或url）：目标小程序中页面路径</li>
</ul>
<p>代码案例：</p>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- 跳转到其它小程序 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">navigator</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"miniProgram"</span> <span class="hljs-attr">app-id</span>=<span class="hljs-string">"wx6ec4f2956a837aef"</span> <span class="hljs-attr">path</span>=<span class="hljs-string">"/pages/index/index"</span>&gt;</span>跳转其它小程序<span class="hljs-tag">&lt;/<span class="hljs-name">navigator</span>&gt;</span>
</div></code></pre>
<h1 id="%E4%BA%8C%E6%A8%A1%E5%9D%97%E5%8C%96%E6%93%8D%E4%BD%9C">二、模块化操作</h1>
<h2 id="1commonjs%E8%A7%84%E8%8C%83">1.commonjs规范</h2>
<p>（1）创建模块  单独的js文件</p>
<p>代码案例：</p>
<pre class="hljs"><code><div>暴露：<span class="hljs-built_in">module</span>.exports    exports
引入：<span class="hljs-built_in">require</span>
</div></code></pre>
<p>（2）在其他页面使用</p>
<p>代码案例：</p>
<p>utils/db.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">let</span> username=<span class="hljs-string">"张三丰"</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">say</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-keyword">return</span> <span class="hljs-string">"我是张三丰"</span>
}

<span class="hljs-comment">// exports.username=username;</span>
<span class="hljs-built_in">module</span>.exports.username=username;
<span class="hljs-built_in">module</span>.exports.say=say
</div></code></pre>
<p>pages/demo1/demo1.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">const</span> result=<span class="hljs-built_in">require</span>(<span class="hljs-string">"../../utils/db"</span>);

Page({
  <span class="hljs-attr">data</span>:{
    <span class="hljs-attr">username</span>:<span class="hljs-string">""</span>
  },
  onLoad(){
    <span class="hljs-keyword">this</span>.setData({
      <span class="hljs-attr">username</span>:result.username

    })
  }
})
</div></code></pre>
<p><strong>总结</strong>：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="2es6%E8%A7%84%E8%8C%83">2.ES6规范</h2>
<p><strong>对外暴露</strong>：</p>
<p>语法：</p>
<pre class="hljs"><code><div>暴露：export {username,age}
引入: import {username as myName,age} from &quot;../db.js&quot;

暴露：export default username
引入：import username from &quot;../db.js&quot;
引入的时候起别名：import myName from &quot;../db.js&quot;
</div></code></pre>
<p>代码案例：</p>
<p>utils/tools.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">let</span> username=<span class="hljs-string">"张三丰"</span>;
<span class="hljs-keyword">let</span> age=<span class="hljs-number">21</span>


<span class="hljs-comment">// 暴露的时候有大括号，引入的时候也要有大括号</span>
<span class="hljs-keyword">export</span> {username,age}

<span class="hljs-comment">//暴露的时候没有大括号，引入的时候也没有大括号</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> username
</div></code></pre>
<p>pages/demo2/demo2.js</p>
<pre class="hljs"><code><div><span class="hljs-comment">// 暴露的时候有大括号，引入的时候也要有大括号</span>
<span class="hljs-keyword">import</span> {username <span class="hljs-keyword">as</span> myName,age} <span class="hljs-keyword">from</span> <span class="hljs-string">"../../utils/tools"</span>;
<span class="hljs-built_in">console</span>.log(myName,age)

<span class="hljs-comment">//暴露的时候没有大括号，引入的时候也没有大括号</span>
<span class="hljs-keyword">import</span> myName <span class="hljs-keyword">from</span> <span class="hljs-string">"../../utils/tools"</span>;
<span class="hljs-built_in">console</span>.log(myName)
Page({

})
</div></code></pre>
<h1 id="%E7%AC%AC%E5%9B%9B%E5%A4%A9">第四天</h1>
<h1 id="%E4%B8%80%E5%B8%B8%E8%A7%81%E7%9A%84api">一、常见的api</h1>
<p>API（Application Programming Interface，应用程序接口）是一些预先定义的接口（函数），目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。</p>
<p>小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。</p>
<h2 id="1api%E7%9A%84%E5%88%86%E7%B1%BB">1.Api的分类</h2>
<p>异步</p>
<pre class="hljs"><code><div>wx.getSystemInfo({
    <span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
        <span class="hljs-comment">// console.log(result)</span>
    },
})
</div></code></pre>
<p>同步</p>
<pre class="hljs"><code><div><span class="hljs-keyword">let</span> result = wx.getSystemInfoSync()
<span class="hljs-built_in">console</span>.log(result)
</div></code></pre>
<h2 id="2%E7%B3%BB%E7%BB%9F%E4%BF%A1%E6%81%AFapi">2.系统信息Api</h2>
<p>代码案例：</p>
<p>pages/index/index.js</p>
<pre class="hljs"><code><div>Page({
  <span class="hljs-comment">//获取设备信息</span>
  getSystem() {
    <span class="hljs-comment">//异步编程</span>
    wx.getSystemInfo({
      <span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
        <span class="hljs-comment">// console.log(result)</span>
        
      },
    })
    <span class="hljs-comment">// console.log(result)</span>
    <span class="hljs-comment">//同步编程</span>
    <span class="hljs-keyword">let</span> result = wx.getSystemInfoSync()
    <span class="hljs-built_in">console</span>.log(result)
  }

})
</div></code></pre>
<h2 id="3%E7%95%8C%E9%9D%A2%E7%9A%84api">3.界面的api</h2>
<h3 id="31%E5%AF%BC%E8%88%AA%E6%A0%8F">3.1导航栏</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>wx.showNavigationBarLoading
wx.hideNavigationBarLoading
wx.setNavigationBarColor
wx.setNavigationBarTitle
</div></code></pre>
<h3 id="32%E4%BA%A4%E4%BA%92%E7%B1%BB">3.2交互类</h3>
<p>代码案例：</p>
<ul>
<li>提示框</li>
</ul>
<pre class="hljs"><code><div> wx.showToast({
      <span class="hljs-attr">title</span>: <span class="hljs-string">'成功提交'</span>,
      <span class="hljs-attr">icon</span>:<span class="hljs-string">"none"</span>,
      <span class="hljs-attr">mask</span>:<span class="hljs-literal">true</span>,
      <span class="hljs-attr">duration</span>:<span class="hljs-number">5000</span>
    })

</div></code></pre>
<ul>
<li>模拟对话框</li>
</ul>
<p><img src="images/image-20210306092015079.png" alt="image-20210306092015079"></p>
<pre class="hljs"><code><div>wx.showModal({
      <span class="hljs-attr">title</span>:<span class="hljs-string">"温馨提示"</span>,
      <span class="hljs-attr">content</span>:<span class="hljs-string">"您确定要删除吗？"</span>,
      <span class="hljs-attr">success</span>:<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
        <span class="hljs-keyword">if</span>(res.confirm){
          <span class="hljs-comment">//删除数据库中的内容</span>
        }
      }
      
    })
</div></code></pre>
<ul>
<li>加载框</li>
</ul>
<p><img src="images/image-20210306092501185.png" alt="image-20210306092501185"></p>
<pre class="hljs"><code><div>Page({
    <span class="hljs-comment">//加载框</span>
    showLoading(){
        wx.showLoading({
            <span class="hljs-attr">title</span>: <span class="hljs-string">'正在加载'</span>,
        })
    },
    <span class="hljs-comment">//隐藏加载框</span>
    hideLoading(){
        wx.hideLoading()
    }
})
</div></code></pre>
<ul>
<li>弹出底部菜单</li>
</ul>
<img src="images/image-20210306092839672.png" alt="image-20210306092839672" style="zoom:67%;" />
<pre class="hljs"><code><div>  wx.showActionSheet({
      <span class="hljs-attr">itemList</span>: [<span class="hljs-string">"北京"</span>,<span class="hljs-string">"上海"</span>,<span class="hljs-string">"广州"</span>,<span class="hljs-string">"深圳"</span>],
      <span class="hljs-attr">success</span>:<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
        <span class="hljs-built_in">console</span>.log(res)
      }
    })
</div></code></pre>
<h3 id="3tabbar%E8%AE%BE%E7%BD%AE">3tabBar设置</h3>
<p><img src="images/image-20210306101712641.png" alt="image-20210306101712641"></p>
<p>代码案例：</p>
<pre class="hljs"><code><div>Page({
     <span class="hljs-comment">//显示红点</span>
  showDot(){
    wx.showTabBarRedDot({
      <span class="hljs-attr">index</span>:<span class="hljs-number">0</span>
    })
  },
  <span class="hljs-comment">//隐藏红点</span>
  hideDot(){
    wx.hideTabBarRedDot({
      <span class="hljs-attr">index</span>: <span class="hljs-number">0</span>,
    })
  },
  <span class="hljs-comment">//隐藏tabbar</span>
  hideTabbar(){
    wx.hideTabBar({
      <span class="hljs-attr">animation</span>: <span class="hljs-literal">true</span>,
    })
  },
  <span class="hljs-comment">//显示tabbar</span>
  showTabbar(){
    wx.showTabBar({
      <span class="hljs-attr">animation</span>: <span class="hljs-literal">true</span>,
    })
  },
  <span class="hljs-comment">//动态设置 tabBar 某一项的内容</span>
  changeTabbar(){
    wx.setTabBarItem({
      <span class="hljs-attr">index</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">text</span>:<span class="hljs-string">"index"</span>,
      <span class="hljs-attr">iconPath</span>:<span class="hljs-string">"/images/member.png"</span>,
      <span class="hljs-attr">selectedIconPath</span>:<span class="hljs-string">"/images/member-selected.png"</span>
    })
  }
})
</div></code></pre>
<h2 id="4%E7%BC%93%E5%AD%98">4.缓存</h2>
<p>单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB</p>
<p>缓存消失的情况</p>
<ul>
<li>​	主动调用api进行删除</li>
<li>​	在小程序列表中，拖动删除小程序</li>
<li>​	缓存的内容超过10M</li>
</ul>
<h3 id="1%E8%AE%BE%E7%BD%AE%E7%BC%93%E5%AD%98">（1）设置缓存</h3>
<ul>
<li>wx.setStorage()</li>
<li>wx.setStorageSync()</li>
</ul>
<p>代码案例：</p>
<pre class="hljs"><code><div>wx.setStorage({
    <span class="hljs-attr">data</span>: [<span class="hljs-string">"五方桥"</span>, <span class="hljs-string">"三元桥"</span>, <span class="hljs-string">"三里屯"</span>],
    <span class="hljs-attr">key</span>: <span class="hljs-string">'address'</span>,
})
</div></code></pre>
<h3 id="2%E8%8E%B7%E5%8F%96%E7%BC%93%E5%AD%98">（2）获取缓存</h3>
<ul>
<li>wx.getStorage()</li>
<li>wx.getStorageSync(&quot;key&quot;)</li>
</ul>
<p>代码案例：</p>
<pre class="hljs"><code><div>wx.getStorageSync(<span class="hljs-string">'address'</span>)
</div></code></pre>
<h3 id="3%E5%88%A0%E9%99%A4%E7%BC%93%E5%AD%98">（3）删除缓存</h3>
<ul>
<li>wx.removeStorage()</li>
<li>wx.removeStorageSync()</li>
</ul>
<p>代码案例：</p>
<pre class="hljs"><code><div>wx.removeStorageSync(<span class="hljs-string">'address'</span>)
</div></code></pre>
<h3 id="4%E6%B8%85%E7%A9%BA%E7%BC%93%E5%AD%98">（4）清空缓存</h3>
<ul>
<li>wx.clearStorage()</li>
<li>wx.clearStorageSync()</li>
</ul>
<p>代码案例：</p>
<pre class="hljs"><code><div>wx.clearStorageSync()
</div></code></pre>
<h3 id="4%E8%8E%B7%E5%8F%96%E7%BC%93%E5%AD%98%E6%8F%8F%E8%BF%B0">（4）获取缓存描述</h3>
<ul>
<li>
<p>wx.getStorageInfo()</p>
</li>
<li>
<p>wx.getStorageInfoSync()</p>
<p>代码案例：</p>
<pre class="hljs"><code><div><span class="hljs-comment">//读取缓存的描述信息</span>
handleGetInfo() {
    <span class="hljs-keyword">let</span> result = wx.getStorageInfoSync()
    <span class="hljs-built_in">console</span>.log(result)
}
</div></code></pre>
<h2 id="%E5%B0%8F%E7%BB%83%E4%B9%A0">小练习</h2>
<p><img src="images/image-20210306172642225.png" alt="image-20210306172642225"></p>
<pre class="hljs"><code><div> //点击收藏
  addLike(){
    // let arr=[]
    //读取缓存中内容
    let arr=wx.getStorageSync('like')||[]
    //判断当前医院在缓存中是否存在
    let index=arr.findIndex(item=&gt;{
      return item.hosName==this.data.detail.hosName
    })

    if(index==-1){
      //不存在，则保存到缓存中
      arr.push(this.data.detail)
      wx.setStorageSync('like', arr)
    }

  }
</div></code></pre>
</li>
</ul>
<h1 id="%E4%BA%8C%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82">二、网络请求</h1>
<p>设置开发工具不校验合法域名</p>
<p><img src="images/image-20210306111020817.png" alt="image-20210306111020817"></p>
<p>API:</p>
<pre class="hljs"><code><div>wx.request({
    <span class="hljs-attr">url</span>:<span class="hljs-string">""</span>,
    <span class="hljs-attr">data</span>:{},
    <span class="hljs-attr">success</span>:<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{

    }
})
</div></code></pre>
<h2 id="1get%E8%AF%B7%E6%B1%82">1.get请求</h2>
<p><img src="images/image-20210306112426782.png" alt="image-20210306112426782"></p>
<p>代码案例：</p>
<p>pages/list/list.js</p>
<pre class="hljs"><code><div>Page({
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">list</span>: []
  },
  onLoad() {
    wx.showLoading({
      <span class="hljs-attr">title</span>: <span class="hljs-string">'正在加载'</span>,
    })

    wx.request({
      <span class="hljs-attr">url</span>: <span class="hljs-string">"https://route.showapi.com/87-60"</span>,
      <span class="hljs-attr">data</span>: {
        <span class="hljs-attr">showapi_appid</span>: <span class="hljs-number">190342</span>,
        <span class="hljs-attr">showapi_sign</span>: <span class="hljs-string">'ec03f001017945e89d21ebe515bc02f4'</span>,
        <span class="hljs-attr">provinceName</span>: <span class="hljs-string">'北京'</span>,
        <span class="hljs-attr">page</span>: <span class="hljs-number">1</span>
      },
      <span class="hljs-attr">method</span>: <span class="hljs-string">"GET"</span>,
      <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
        wx.hideLoading()      <span class="hljs-comment">//隐藏加载框</span>
        <span class="hljs-keyword">this</span>.setData({
          <span class="hljs-attr">list</span>: res.data.showapi_res_body.hospitalList
        })

      }
    })
    


  },
  <span class="hljs-comment">//跳转详情页</span>
  toDetail(e) {
    <span class="hljs-comment">// console.log(e)</span>
    <span class="hljs-keyword">let</span> id = e.currentTarget.id;    <span class="hljs-comment">//医院id</span>
    <span class="hljs-comment">//跳转详情页</span>
    wx.navigateTo({
      <span class="hljs-attr">url</span>: <span class="hljs-string">'/pages/detail/detail?id='</span> + id,
    })

  }
})
</div></code></pre>
<h2 id="%E5%88%97%E8%A1%A8%E9%A1%B5%E8%B7%B3%E8%BD%AC%E8%AF%A6%E6%83%85%E9%A1%B5">列表页跳转详情页</h2>
<ul>
<li>
<p>点击列表，路由跳转，携带参数id</p>
</li>
<li>
<p>详情页加载，获取id，请求详情接口</p>
<p>pages/detail/detail.js</p>
<pre class="hljs"><code><div>Page({
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">detail</span>: {},    <span class="hljs-comment">//医院详情</span>
  },
  onLoad(e) {
    <span class="hljs-keyword">let</span> id = e.id;    <span class="hljs-comment">//获取医院id</span>

    <span class="hljs-comment">//显示加载框</span>
    wx.showLoading({
      <span class="hljs-attr">title</span>: <span class="hljs-string">'正在加载'</span>,
    })
    <span class="hljs-comment">//发送网络请求，获取医院详情</span>
    wx.request({
      <span class="hljs-attr">url</span>: <span class="hljs-string">'https://route.showapi.com/87-59'</span>,
      <span class="hljs-attr">data</span>: {
        <span class="hljs-attr">showapi_appid</span>: <span class="hljs-string">"190342"</span>,
        <span class="hljs-attr">showapi_sign</span>: <span class="hljs-string">"ec03f001017945e89d21ebe515bc02f4"</span>,
        id
      },
      <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> detail = res.data.showapi_res_body;
        wx.hideLoading()      <span class="hljs-comment">//隐藏加载框</span>
        <span class="hljs-comment">//把数据渲染到页面</span>
        <span class="hljs-keyword">this</span>.setData({
          detail
        })
      },
      <span class="hljs-attr">fail</span>: <span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> {
        <span class="hljs-built_in">console</span>.log(err)
      }
    })
  }
})
</div></code></pre>
<p>pages/detail/detail.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{detail.img}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{detail.hosName}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{detail.info}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
</li>
</ul>
<h2 id="2post%E8%AF%B7%E6%B1%82">2.post请求</h2>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="3%E7%BD%91%E7%BB%9C%E5%B0%81%E8%A3%85">3.网络封装</h2>
<p>封装一个函数http，把异步请求转成同步</p>
<p>代码案例：</p>
<p>utils/config.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">const</span> config={
  <span class="hljs-attr">baseUrl</span>:<span class="hljs-string">"https://route.showapi.com"</span>,
  <span class="hljs-attr">showapi_appid</span>:<span class="hljs-string">"190342"</span>,
  <span class="hljs-attr">showapi_sign</span>:<span class="hljs-string">"ec03f001017945e89d21ebe515bc02f4"</span>
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> config
</div></code></pre>
<p>/utils/http.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">import</span> config <span class="hljs-keyword">from</span> <span class="hljs-string">"./config"</span>;
<span class="hljs-comment">//封装http请求，返回一个promise对象</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">http</span>(<span class="hljs-params">params</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {
    wx.request({
      <span class="hljs-attr">url</span>: config.baseUrl+params.url,
      <span class="hljs-attr">data</span>:{
        <span class="hljs-attr">showapi_appid</span>:config.showapi_appid,
        <span class="hljs-attr">showapi_sign</span>:config.showapi_sign,
        <span class="hljs-comment">// url:params.url,</span>
        <span class="hljs-comment">// id:params.id,</span>
        <span class="hljs-comment">// page:params.page</span>
        ...params
      },
      <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
        resolve(res)
      },
      <span class="hljs-attr">fail</span>: <span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> {
        reject(err)
      }
    })

  })
}

<span class="hljs-keyword">export</span> { http }
</div></code></pre>
<p>pages/list/list.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">import</span> {http} <span class="hljs-keyword">from</span> <span class="hljs-string">"../../utils/http"</span>;
Page({
    onLoad(){
        <span class="hljs-keyword">let</span> result =<span class="hljs-keyword">await</span> http({<span class="hljs-attr">url</span>:<span class="hljs-string">"/87-60"</span>,<span class="hljs-attr">provinceName</span>:<span class="hljs-string">"北京"</span>})
        <span class="hljs-keyword">this</span>.setData({
            <span class="hljs-attr">list</span>: result.data.showapi_res_body.hospitalList
        })
        wx.hideLoading()
    }
})
</div></code></pre>
<p>pages/list/list.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{list}}"</span> <span class="hljs-attr">wx:key</span>=<span class="hljs-string">"id"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"toDetail"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"{{item.id}}"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"aspectFill"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{item.img}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"right"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>名称：{{item.hosName}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>地址：{{item.addr}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<p><strong>Tips</strong></p>
<pre class="hljs"><code><div>
</div></code></pre>
<p>every</p>
<p>some</p>
<p>filter</p>
<p>map</p>
<p>forEacch</p>
<p>findIndex</p>
<p>reduce</p>
<p>sort</p>
<h3 id="%E8%A7%A6%E5%BA%95%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%A4%9A">触底加载更多</h3>
<p>1.页面触底（onReachBottom），page+1</p>
<p>2.发送网络请求，请求第2页的数据</p>
<p>3.数组拼接（concat）</p>
<h4 id="page%E8%BF%9B%E8%A1%8C%E7%B4%AF%E5%8A%A0">page进行累加：</h4>
<p>onLoad   page=1</p>
<p>第1次onReachBottom   page=2</p>
<p>第2次onReachBottom   page=3</p>
<p>第3次onReachBottom   page=4</p>
<p>第4次onReachBottom   page=5</p>
<p>。。。。</p>
<h4 id="%E4%BB%A3%E7%A0%81">代码</h4>
<p><img src="images/image-20210308090951660.png" alt="image-20210308090951660"></p>
<p>pages/index/index.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">import</span> { http } <span class="hljs-keyword">from</span> <span class="hljs-string">"../../utils/http"</span>;
Page({
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">list</span>: [],    <span class="hljs-comment">//童话列表</span>
    <span class="hljs-attr">page</span>: <span class="hljs-number">1</span>
  },
  <span class="hljs-keyword">async</span> onLoad() {
    <span class="hljs-keyword">this</span>.getPage()
  },
  <span class="hljs-comment">//页面触底</span>
  onReachBottom() {
    <span class="hljs-comment">//page累加</span>
    <span class="hljs-keyword">this</span>.data.page += <span class="hljs-number">1</span>;
    <span class="hljs-keyword">this</span>.getPage()

  },
  <span class="hljs-comment">//获取数据</span>
  <span class="hljs-keyword">async</span> getPage() {
    wx.showLoading({
      <span class="hljs-attr">title</span>: <span class="hljs-string">'正在加载'</span>,
    })
    <span class="hljs-keyword">let</span> result = <span class="hljs-keyword">await</span> http({
      <span class="hljs-attr">url</span>: <span class="hljs-string">"/1700-2"</span>,
      <span class="hljs-attr">data</span>: {
        <span class="hljs-attr">classifyId</span>: <span class="hljs-number">1</span>,
        <span class="hljs-attr">page</span>: <span class="hljs-keyword">this</span>.data.page
      }
    })
      .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> {
        <span class="hljs-built_in">console</span>.log(err);
        <span class="hljs-keyword">return</span>;
      })
    <span class="hljs-keyword">this</span>.setData({
      <span class="hljs-attr">list</span>: <span class="hljs-keyword">this</span>.data.list.concat(result.data.showapi_res_body.contentlist)
    })
    wx.hideLoading()

  }
})
</div></code></pre>
<h1 id="%E4%B8%89%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6">三、自定义组件</h1>
<h2 id="1%E6%A6%82%E8%BF%B0">1.概述</h2>
<p>小程序支持简洁的组件化编程，开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；自定义组件在使用时与基础组件非常相似。</p>
<h2 id="1%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6">1.创建自定义组件</h2>
<p>类似于页面一样，一个自定义组件由 json wxml wxss js 4个文件组成；要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）
如:</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"component"</span>: <span class="hljs-literal">true</span>
}
</div></code></pre>
<p>创建步骤：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="2%E7%BB%84%E4%BB%B6%E7%9A%84%E5%BC%95%E7%94%A8">2.组件的引用</h2>
<h3 id="1%E5%B1%80%E9%83%A8%E5%BC%95%E7%94%A8">（1）局部引用</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h3 id="2%E5%85%A8%E5%B1%80%E5%BC%95%E7%94%A8">（2）全局引用</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h3 id="3page%E4%BD%BF%E7%94%A8">（3）Page使用</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="3%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95">3.组件的基本语法</h2>
<h3 id="1%E6%A0%B7%E5%BC%8F%E6%93%8D%E4%BD%9C">（1）样式操作</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h3 id="2%E7%A7%81%E6%9C%89%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A">（2）私有数据绑定</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h3 id="3%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6">（3）自定义事件</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h3 id="4-properties%E7%BB%84%E4%BB%B6%E5%AF%B9%E5%A4%96%E5%BC%80%E6%94%BE%E5%B1%9E%E6%80%A7">（4） properties组件对外开放属性</h3>
<p><strong>properties  简介</strong></p>
<p>组件的对外属性，用来接收外界传递到组件中的数据,组件的 <code>properties</code> 和 <code>data</code> 的用法类似，它们都是可读可写的，只不过：</p>
<ul>
<li>
<p><code>data</code> 更倾向于存储组件的私有数据</p>
</li>
<li>
<p><code>properties</code> 更倾向于存储外界传递到组件中的数据</p>
</li>
</ul>
<p><strong>properties  语法结构</strong></p>
<p>属性包括：type，optionalTypes，value，observer（新版本不推荐使用）</p>
<pre class="hljs"><code><div>properties: {
  <span class="hljs-attr">msg</span>: {			<span class="hljs-comment">// 属性名</span>
    <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>,	<span class="hljs-comment">// 属性的数据类型</span>
    <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>		<span class="hljs-comment">// 默认值</span>
  }
}
**注意：type 的可选值为 <span class="hljs-built_in">Number</span>，<span class="hljs-built_in">String</span>、<span class="hljs-built_in">Boolean</span>、<span class="hljs-built_in">Object</span>、<span class="hljs-built_in">Array</span>、<span class="hljs-literal">null</span>(表示不限制类型)**
</div></code></pre>
<p><strong>向组件传递 properties</strong></p>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<p>**组件内修改 properties **</p>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="4slot%E6%8F%92%E6%A7%BD%E4%BD%BF%E7%94%A8">4.slot插槽使用</h2>
<h3 id="41%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD">4.1默认插槽</h3>
<p>在组件的 <code>wxml</code> 中可以包含 <code>slot</code> 节点，用于承载组件使用者提供的 <code>wxml</code> 结构。默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。</p>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h3 id="42%E5%A4%9A%E4%B8%AA%E6%8F%92%E6%A7%BD">4.2多个插槽</h3>
<p>可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分，需要使用多 slot 时，可以在组件 js 中声明启用：</p>
<pre class="hljs"><code><div>Component({
  <span class="hljs-attr">options</span>: {
    <span class="hljs-attr">multipleSlots</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">// 在组件定义时的选项中启用多slot支持</span>
  },
  <span class="hljs-attr">properties</span>: { <span class="hljs-comment">/* ... */</span> },
  <span class="hljs-attr">methods</span>: { <span class="hljs-comment">/* ... */</span> }
})
</div></code></pre>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h1 id="%E5%9B%9Bweui%E7%BB%84%E4%BB%B6%E5%BA%93">四、weui组件库</h1>
<p>一套基于样式库<a href="https://github.com/Tencent/weui-wxss/">weui-wxss</a>开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。</p>
<h2 id="1%E5%AE%89%E8%A3%85">1.安装</h2>
<h3 id="11-npm-%E5%AE%89%E8%A3%85">1.1  npm  安装</h3>
<p>安装步骤及使用：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h3 id="12%E6%8B%93%E5%B1%95%E5%BA%93%E7%9A%84%E5%BD%A2%E5%BC%8F%E6%8E%A8%E8%8D%90">1.2拓展库的形式（推荐）</h3>
<p>安装步骤及使用：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="2%E6%A1%88%E4%BE%8B">2.案例</h2>
<pre class="hljs"><code><div>
</div></code></pre>
<h1 id="%E4%BA%94%E5%88%86%E5%8C%85%E5%8A%A0%E8%BD%BD">五、分包加载</h1>
<h2 id="1%E6%A6%82%E8%BF%B0">1.概述</h2>
<p>某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。</p>
<h2 id="2%E4%BC%98%E5%8A%BF">2.优势</h2>
<p>1.在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
2.单个分包/主包大小不能超过 2M,整个小程序所有分包大小不超过 20M,能够将工程大小扩充到20M
3.对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。</p>
<h2 id="3%E9%85%8D%E7%BD%AE%E5%88%86%E5%8C%85%E7%BB%93%E6%9E%84">3.配置分包结构</h2>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="4%E7%8B%AC%E7%AB%8B%E5%88%86%E5%8C%85">4.独立分包</h2>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h1 id="%E7%AC%AC%E4%BA%94%E5%A4%A9">第五天</h1>
<h1 id="%E4%B8%80%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6">一、自定义组件</h1>
<h2 id="1%E6%A6%82%E8%BF%B0">1.概述</h2>
<p>小程序支持简洁的组件化编程，开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；自定义组件在使用时与基础组件非常相似。</p>
<h2 id="1%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6">1.创建自定义组件</h2>
<p>类似于页面一样，一个自定义组件由 json wxml wxss js 4个文件组成；要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）
如:</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"component"</span>: <span class="hljs-literal">true</span>
}
</div></code></pre>
<p>创建步骤：</p>
<pre class="hljs"><code><div>在项目根目录下创建文件夹components
在components下右键，新建component
</div></code></pre>
<p>代码案例：</p>
<p>/components/test/test.js</p>
<pre class="hljs"><code><div><span class="hljs-comment">// components/test/test.js</span>
Component({
  <span class="hljs-comment">/**
   * 组件的属性列表
   */</span>
  <span class="hljs-attr">properties</span>: {
    <span class="hljs-attr">title</span>:{
      <span class="hljs-attr">type</span>:<span class="hljs-built_in">String</span>,
      <span class="hljs-attr">value</span>:<span class="hljs-string">""</span>
    }
  },

  <span class="hljs-comment">/**
   * 组件的初始数据
   */</span>
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">message</span>:<span class="hljs-string">"hello world"</span>
  },

  <span class="hljs-comment">/**
   * 组件的方法列表
   */</span>
  <span class="hljs-attr">methods</span>: {

  },
  <span class="hljs-comment">//生命周期</span>
  <span class="hljs-attr">lifetimes</span>:{

  }
})

</div></code></pre>
<p>/components/test/test.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{title}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>{{message}}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
</div></code></pre>
<h2 id="2%E7%BB%84%E4%BB%B6%E7%9A%84%E5%BC%95%E7%94%A8">2.组件的引用</h2>
<h3 id="1%E5%B1%80%E9%83%A8%E5%BC%95%E7%94%A8">（1）局部引用</h3>
<p>代码案例：</p>
<p>pages/list/list.json</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"usingComponents"</span>: {
    <span class="hljs-attr">"mp-test"</span>:<span class="hljs-string">"../../components/test/test"</span>
  }
}
</div></code></pre>
<h3 id="2%E5%85%A8%E5%B1%80%E5%BC%95%E7%94%A8">（2）全局引用</h3>
<p>代码案例：</p>
<p>app.json</p>
<pre class="hljs"><code><div>{
    <span class="hljs-attr">"usingComponents"</span>: {
        <span class="hljs-attr">"mp-test"</span>: <span class="hljs-string">"./components/test/test"</span>
    },
}
</div></code></pre>
<h3 id="3page%E4%BD%BF%E7%94%A8">（3）Page使用</h3>
<p>代码案例：</p>
<p>pages/list/list.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">mp-test</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"京东商城"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">mp-test</span>&gt;</span>
</div></code></pre>
<h2 id="3%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95">3.组件的基本语法</h2>
<h3 id="1%E6%A0%B7%E5%BC%8F%E6%93%8D%E4%BD%9C">（1）样式操作</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div><span class="hljs-comment">/* components/nav/nav.wxss */</span>
<span class="hljs-selector-class">.main</span>{
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">justify-content</span>: space-between;
}
<span class="hljs-selector-class">.back</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">60</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">60</span>rpx;
}
</div></code></pre>
<h3 id="2%E7%A7%81%E6%9C%89%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A">（2）私有数据绑定</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>Component({
    <span class="hljs-attr">data</span>:{
        
    }
})
</div></code></pre>
<h3 id="3%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6">（3）自定义事件</h3>
<h5 id="%E5%AD%90%E7%BB%84%E4%BB%B6%E8%A7%A6%E5%8F%91%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E6%B3%95">子组件触发父组件的方法</h5>
<p>/components/nav/nav.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"main"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"back"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./images/back.png"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"handleBack"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>center<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>right<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<p>/components/nav/nav.js</p>
<pre class="hljs"><code><div>Component({
          <span class="hljs-attr">methods</span>: {
        handleBack(){
          <span class="hljs-comment">// console.log("----子组件的back----")</span>
          <span class="hljs-keyword">this</span>.triggerEvent(<span class="hljs-string">"run"</span>,{<span class="hljs-attr">id</span>:<span class="hljs-number">1001</span>})
        }

      }
    })
</div></code></pre>
<p>父组件绑定方法：</p>
<p>pages/list/list.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">mp-nav</span> <span class="hljs-attr">bindrun</span>=<span class="hljs-string">"myBack"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">mp-nav</span>&gt;</span>
</div></code></pre>
<p>pages/list/list.js</p>
<pre class="hljs"><code><div>Page({
  myBack(e){
    <span class="hljs-built_in">console</span>.log(e,<span class="hljs-string">"---我是父组件的myBack---"</span>)
  }
})
</div></code></pre>
<h5 id="%E7%88%B6%E7%BB%84%E4%BB%B6%E8%B0%83%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E4%B8%AD%E6%96%B9%E6%B3%95">父组件调用子组件的中方法</h5>
<p>通过this.selectComponent(“”)来选择子组件</p>
<p>pages/list/list.wxml</p>
<pre class="hljs"><code><div>
&lt;mp-nav id=&quot;nav&quot; bindrun=&quot;myBack&quot;&gt;&lt;/mp-nav&gt;

&lt;button type=&quot;primary&quot; bindtap=&quot;myClick&quot;&gt;父组件button&lt;/button&gt;
</div></code></pre>
<p>pages/list/list.js</p>
<pre class="hljs"><code><div>Page({
  myClick(){
    //父组件调用子组件的中方法
    let nav=this.selectComponent(&quot;#nav&quot;);
    nav.next()
  }
})
</div></code></pre>
<h3 id="4-properties%E7%BB%84%E4%BB%B6%E5%AF%B9%E5%A4%96%E5%BC%80%E6%94%BE%E5%B1%9E%E6%80%A7">（4） properties组件对外开放属性</h3>
<p><strong>properties  简介</strong></p>
<p>组件的对外属性，用来接收外界传递到组件中的数据,组件的 <code>properties</code> 和 <code>data</code> 的用法类似，它们都是可读可写的，只不过：</p>
<ul>
<li>
<p><code>data</code> 更倾向于存储组件的私有数据</p>
</li>
<li>
<p><code>properties</code> 更倾向于存储外界传递到组件中的数据</p>
</li>
</ul>
<p><strong>properties  语法结构</strong></p>
<p>属性包括：type，optionalTypes，value，observer（新版本不推荐使用）</p>
<pre class="hljs"><code><div>properties: {
  <span class="hljs-attr">msg</span>: {			<span class="hljs-comment">// 属性名</span>
    <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>,	<span class="hljs-comment">// 属性的数据类型</span>
    <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>		<span class="hljs-comment">// 默认值</span>
  }
}
**注意：type 的可选值为 <span class="hljs-built_in">Number</span>，<span class="hljs-built_in">String</span>、<span class="hljs-built_in">Boolean</span>、<span class="hljs-built_in">Object</span>、<span class="hljs-built_in">Array</span>、<span class="hljs-literal">null</span>(表示不限制类型)**
</div></code></pre>
<p><strong>向组件传递 properties</strong></p>
<p>代码案例：</p>
<h4 id="%E7%88%B6%E7%BB%84%E4%BB%B6">父组件</h4>
<p>pages/list/list.json</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"usingComponents"</span>: {
    <span class="hljs-attr">"mp-nav"</span>:<span class="hljs-string">"../../components/nav/nav"</span>
  }
}
</div></code></pre>
<p>pages/list/list.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">mp-test</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"京东商城"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">mp-test</span>&gt;</span>
</div></code></pre>
<h4 id="%E5%AD%90%E7%BB%84%E4%BB%B6">子组件</h4>
<p>/components/nav/nav.js</p>
<pre class="hljs"><code><div><span class="hljs-comment">// components/test/test.js</span>
Component({
  <span class="hljs-comment">/**
   * 组件的属性列表
   */</span>
  <span class="hljs-attr">properties</span>: {
    <span class="hljs-attr">title</span>:{
      <span class="hljs-attr">type</span>:<span class="hljs-built_in">String</span>,
      <span class="hljs-attr">value</span>:<span class="hljs-string">""</span>
    }
  },

  <span class="hljs-comment">/**
   * 组件的初始数据
   */</span>
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">message</span>:<span class="hljs-string">"hello world"</span>
  },

  <span class="hljs-comment">/**
   * 组件的方法列表
   */</span>
  <span class="hljs-attr">methods</span>: {

  },
  <span class="hljs-comment">//生命周期</span>
  <span class="hljs-attr">lifetimes</span>:{

  }
})

</div></code></pre>
<h2 id="4slot%E6%8F%92%E6%A7%BD%E4%BD%BF%E7%94%A8">4.slot插槽使用</h2>
<h3 id="41%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD">4.1默认插槽</h3>
<p>在组件的 <code>wxml</code> 中可以包含 <code>slot</code> 节点，用于承载组件使用者提供的 <code>wxml</code> 结构。默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。</p>
<p>代码案例：</p>
<p>pages/list/list.json</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"usingComponents"</span>: {
    <span class="hljs-attr">"mp-icon"</span>:<span class="hljs-string">"../../components/icon/icon"</span>
  }
}
</div></code></pre>
<p>pages/list/list.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">mp-icon</span>&gt;</span>
  京东商城
<span class="hljs-tag">&lt;/<span class="hljs-name">mp-icon</span>&gt;</span>
</div></code></pre>
<p>/components/icon/icon.wxml</p>
<pre class="hljs"><code><div>我是icon
<span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>
</div></code></pre>
<h3 id="42%E5%A4%9A%E4%B8%AA%E6%8F%92%E6%A7%BD">4.2多个插槽</h3>
<p>可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分，需要使用多 slot 时，可以在组件 js 中声明启用：</p>
<pre class="hljs"><code><div>Component({
  <span class="hljs-attr">options</span>: {
    <span class="hljs-attr">multipleSlots</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">// 在组件定义时的选项中启用多slot支持</span>
  },
  <span class="hljs-attr">properties</span>: { <span class="hljs-comment">/* ... */</span> },
  <span class="hljs-attr">methods</span>: { <span class="hljs-comment">/* ... */</span> }
})
</div></code></pre>
<p>代码案例：</p>
<p>pages/list/list.wxml</p>
<pre class="hljs"><code><div>
<span class="hljs-tag">&lt;<span class="hljs-name">mp-icon</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"left"</span>&gt;</span>回退<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>前进<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">mp-icon</span>&gt;</span>

</div></code></pre>
<p>/components/icon/icon.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>中间<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>
</div></code></pre>
<h1 id="%E4%BA%8Cweui%E7%BB%84%E4%BB%B6%E5%BA%93">二、weui组件库</h1>
<p>一套基于样式库<a href="https://github.com/Tencent/weui-wxss/">weui-wxss</a>开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。</p>
<h2 id="1%E5%AE%89%E8%A3%85">1.安装</h2>
<h3 id="11-npm-%E5%AE%89%E8%A3%85">1.1  npm  安装</h3>
<p>安装步骤及使用：</p>
<ul>
<li>
<p>初始化项目</p>
<p>/miniprogram目录下进行初始化</p>
<pre class="hljs"><code><div>npm init -y
</div></code></pre>
</li>
<li>
<p>安装weui-miniprogranm</p>
<p>/miniprogram目录下安装模块</p>
<pre class="hljs"><code><div>npm i weui-miniprogram
</div></code></pre>
</li>
<li>
<p>构建：生成一个新的目录</p>
<p>菜单栏/工具/构建npm，生成一个新的目录：miniprogram_npm</p>
</li>
<li>
<p>app.wxss引入全局样式</p>
<pre class="hljs"><code><div><span class="hljs-keyword">@import</span> <span class="hljs-string">'/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'</span>;
</div></code></pre>
</li>
<li>
<p>在json文件中引入子组件</p>
<p>pages/list/list.json</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"usingComponents"</span>: {
    <span class="hljs-attr">"mp-searchbar"</span>:<span class="hljs-string">"weui-miniprogram/searchbar/searchbar"</span>
  }
}
</div></code></pre>
</li>
<li>
<p>在wxml中使用子组件</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">mp-searchbar</span> /&gt;</span>
</div></code></pre>
</li>
</ul>
<h3 id="12%E6%8B%93%E5%B1%95%E5%BA%93%E7%9A%84%E5%BD%A2%E5%BC%8F%E6%8E%A8%E8%8D%90">1.2拓展库的形式（推荐）</h3>
<p>安装步骤及使用：</p>
<ul>
<li>配置app.json</li>
</ul>
<pre class="hljs"><code><div>{
    <span class="hljs-attr">"useExtendedLib"</span>: {
        <span class="hljs-attr">"weui"</span>:<span class="hljs-literal">true</span>
    }
}
</div></code></pre>
<ul>
<li>
<p>页面配置文件中进行引入</p>
<p>pages/index/index.json</p>
<pre class="hljs"><code><div>{
  &quot;usingComponents&quot;: {
    &quot;mp-searchbar&quot;:&quot;weui-miniprogram/searchbar/searchbar&quot;
  }
}
</div></code></pre>
</li>
<li>
<p>在页面中使用</p>
</li>
</ul>
<p>pages/index/index.wxml</p>
<pre class="hljs"><code><div>&lt;mp-searchbar /&gt;
</div></code></pre>
<h2 id="2%E6%A1%88%E4%BE%8B">2.案例</h2>
<p><img src="images/image-20210308141711029.png" alt="image-20210308141711029"></p>
<p>pages/form/form.json</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"usingComponents"</span>: {
    <span class="hljs-attr">"mp-navigation-bar"</span>: <span class="hljs-string">"weui-miniprogram/navigation-bar/navigation-bar"</span>,
    <span class="hljs-attr">"mp-icon"</span>: <span class="hljs-string">"weui-miniprogram/icon/icon"</span>,
    <span class="hljs-attr">"mp-searchbar"</span>: <span class="hljs-string">"weui-miniprogram/searchbar/searchbar"</span>,
    <span class="hljs-attr">"mp-tabbar"</span>: <span class="hljs-string">"weui-miniprogram/tabbar/tabbar"</span>,
    <span class="hljs-attr">"mp-cells"</span>:<span class="hljs-string">"weui-miniprogram/cells/cells"</span>,
    <span class="hljs-attr">"mp-cell"</span>:<span class="hljs-string">"weui-miniprogram/cell/cell"</span>
  }
}
</div></code></pre>
<p>pages/form/form.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">mp-navigation-bar</span> <span class="hljs-attr">background</span>=<span class="hljs-string">"red"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"white"</span> <span class="hljs-attr">back</span>=<span class="hljs-string">"{{false}}"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"left"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"back"</span>&gt;</span>
    返回|首页
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">mp-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"white"</span> /&gt;</span>
    订单查询
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">mp-navigation-bar</span>&gt;</span>

<span class="hljs-comment">&lt;!-- 搜索框 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">mp-searchbar</span> /&gt;</span>

<span class="hljs-comment">&lt;!-- tabbar --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">mp-tabbar</span> <span class="hljs-attr">list</span>=<span class="hljs-string">"{{list}}"</span> /&gt;</span>


<span class="hljs-tag">&lt;<span class="hljs-name">mp-cells</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"订单基本信息查询"</span> <span class="hljs-attr">footer</span>=<span class="hljs-string">"请仔细核对"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">mp-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"代付款"</span> <span class="hljs-attr">footer</span>=<span class="hljs-string">"查看"</span> <span class="hljs-attr">link</span>=<span class="hljs-string">"{{true}}"</span> <span class="hljs-attr">hover</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/money.png"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">mp-cell</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">mp-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"代付款"</span> <span class="hljs-attr">footer</span>=<span class="hljs-string">"查看"</span> <span class="hljs-attr">link</span>=<span class="hljs-string">"{{true}}"</span> <span class="hljs-attr">hover</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/money.png"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">mp-cell</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">mp-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"代付款"</span> <span class="hljs-attr">footer</span>=<span class="hljs-string">"查看"</span> <span class="hljs-attr">link</span>=<span class="hljs-string">"{{true}}"</span> <span class="hljs-attr">hover</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/money.png"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">mp-cell</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">mp-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"代付款"</span> <span class="hljs-attr">footer</span>=<span class="hljs-string">"查看"</span> <span class="hljs-attr">link</span>=<span class="hljs-string">"{{true}}"</span> <span class="hljs-attr">hover</span>=<span class="hljs-string">"{{true}}"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/money.png"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">mp-cell</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">mp-cells</span>&gt;</span>
</div></code></pre>
<p>pages/form/form.wxss</p>
<pre class="hljs"><code><div><span class="hljs-comment">/* pages/form/form.wxss */</span>
<span class="hljs-selector-class">.back</span>{
  <span class="hljs-attribute">border</span>: <span class="hljs-number">1</span>rpx solid <span class="hljs-number">#fff</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">20</span>rpx;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">32</span>rpx;
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">5</span>rpx <span class="hljs-number">10</span>rpx;
}

<span class="hljs-selector-class">.weui-bar__item_on</span>{
  <span class="hljs-attribute">color</span>: red <span class="hljs-meta">!important</span>; 
}
<span class="hljs-selector-class">.img</span>{
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100</span>rpx;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">100</span>rpx;
}
</div></code></pre>
<h1 id="%E4%B8%89%E5%88%86%E5%8C%85%E5%8A%A0%E8%BD%BD">三、分包加载</h1>
<h2 id="1%E6%A6%82%E8%BF%B0">1.概述</h2>
<p>某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。</p>
<h2 id="2%E4%BC%98%E5%8A%BF">2.优势</h2>
<p>1.在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
2.单个分包/主包大小不能超过 2M,整个小程序所有分包大小不超过 20M,能够将工程大小扩充到20M
3.对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。</p>
<h2 id="3%E9%85%8D%E7%BD%AE%E5%88%86%E5%8C%85%E7%BB%93%E6%9E%84">3.配置分包结构</h2>
<p>代码案例：</p>
<p>app.json</p>
<pre class="hljs"><code><div>{
  <span class="hljs-attr">"pages"</span>: [
    <span class="hljs-string">"pages/index/index"</span>,
    <span class="hljs-string">"pages/form/form"</span>
  ],
  <span class="hljs-attr">"subPackages"</span>: [
    {
      <span class="hljs-attr">"root"</span>:<span class="hljs-string">"packageA"</span>,
      <span class="hljs-attr">"pages"</span>:[
        <span class="hljs-string">"pages/cat/cat"</span>,
        <span class="hljs-string">"pages/dog/dog"</span>
      ]
    },
    {
      <span class="hljs-attr">"root"</span>: <span class="hljs-string">"packageB"</span>,
      <span class="hljs-attr">"pages"</span>:[
        <span class="hljs-string">"pages/apple/apple"</span>,
        <span class="hljs-string">"pages/banana/banana"</span>
      ],
      <span class="hljs-attr">"independent"</span>: <span class="hljs-literal">true</span>
    }
  ],
  <span class="hljs-attr">"window"</span>: {
    <span class="hljs-attr">"backgroundColor"</span>: <span class="hljs-string">"#F6F6F6"</span>,
    <span class="hljs-attr">"backgroundTextStyle"</span>: <span class="hljs-string">"light"</span>,
    <span class="hljs-attr">"navigationBarBackgroundColor"</span>: <span class="hljs-string">"#F6F6F6"</span>,
    <span class="hljs-attr">"navigationBarTitleText"</span>: <span class="hljs-string">"云开发 QuickStart"</span>,
    <span class="hljs-attr">"navigationBarTextStyle"</span>: <span class="hljs-string">"black"</span>

  },
  <span class="hljs-attr">"useExtendedLib"</span>: {
    <span class="hljs-attr">"weui"</span>:<span class="hljs-literal">true</span>
  },
  <span class="hljs-attr">"sitemapLocation"</span>: <span class="hljs-string">"sitemap.json"</span>,
  <span class="hljs-attr">"style"</span>: <span class="hljs-string">"v2"</span>
}
</div></code></pre>
<h2 id="4%E7%8B%AC%E7%AB%8B%E5%88%86%E5%8C%85">4.独立分包</h2>
<p>代码案例：</p>
<p>app.json</p>
<pre class="hljs"><code><div>  <span class="hljs-string">"subPackages"</span>: [
    {
      <span class="hljs-attr">"root"</span>:<span class="hljs-string">"packageA"</span>,
      <span class="hljs-attr">"pages"</span>:[
        <span class="hljs-string">"pages/cat/cat"</span>,
        <span class="hljs-string">"pages/dog/dog"</span>
      ]
    },
    {
      <span class="hljs-attr">"root"</span>: <span class="hljs-string">"packageB"</span>,
      <span class="hljs-attr">"pages"</span>:[
        <span class="hljs-string">"pages/apple/apple"</span>,
        <span class="hljs-string">"pages/banana/banana"</span>
      ],
      <span class="hljs-attr">"independent"</span>: <span class="hljs-literal">true</span>
    }
  ],
</div></code></pre>
<h1 id="%E5%9B%9B%E5%BC%80%E6%94%BE%E8%83%BD%E5%8A%9B">四、开放能力</h1>
<h2 id="1%E6%8E%88%E6%9D%83">1.授权</h2>
<h3 id="11%E6%A6%82%E8%BF%B0">1.1概述</h3>
<p>微信获取用户信息、保存照片或者视频到手机相册！！ 需要用户主动点击同意进行授权</p>
<p>提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功</p>
<h3 id="12%E8%BF%9B%E8%A1%8C%E6%8E%88%E6%9D%83">1.2进行授权</h3>
<p><img src="images/image-20210308161332235.png" alt="image-20210308161332235"></p>
<p><strong>点击button，弹出授权框</strong></p>
<pre class="hljs"><code><div>1.open-type=&quot;getUserInfo&quot;   
2.绑定事件:bindgetuserinfo=&quot;getInfo&quot;
</div></code></pre>
<p><strong>代码样例：</strong></p>
<p>pages/my/my.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{isLogin}}"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"head"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{userInfo.avatarUrl}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>{{userInfo.nickName}}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">wx:else</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"getUserInfo"</span> <span class="hljs-attr">bindgetuserinfo</span>=<span class="hljs-string">"getInfo"</span>&gt;</span>登录<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

</div></code></pre>
<p>pages/my/my.js</p>
<pre class="hljs"><code><div>Page({
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">isLogin</span>: <span class="hljs-literal">false</span>,    <span class="hljs-comment">//false 没有授权;true 已经授权</span>
    <span class="hljs-attr">userInfo</span>: <span class="hljs-literal">null</span>,
  },
  <span class="hljs-comment">//页面加载，获取用户信息</span>
  onLoad() {
    <span class="hljs-comment">//获取用户授权信息</span>
    wx.getSetting({
      <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (res.authSetting[<span class="hljs-string">'scope.userInfo'</span>]) {
          <span class="hljs-comment">//用户已经授权，通过wx.getUserInfo可以获取用户信息</span>
          wx.getUserInfo({
            <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
              <span class="hljs-keyword">this</span>.setData({
                <span class="hljs-attr">userInfo</span>: res.userInfo,
                <span class="hljs-attr">isLogin</span>: <span class="hljs-literal">true</span>
              })
            }
          })
        }
      }
    })
  },
  <span class="hljs-comment">//点击事件</span>
  getInfo(e) {
    <span class="hljs-keyword">let</span> userInfo = e.detail.userInfo;
    <span class="hljs-keyword">this</span>.setData({
      userInfo,
      <span class="hljs-attr">isLogin</span>: <span class="hljs-literal">true</span>
    })
  }
})
</div></code></pre>
<p><strong>授权有效期</strong></p>
<pre class="hljs"><code><div>
</div></code></pre>
<h3 id="12%E6%A3%80%E6%B5%8B%E6%8E%88%E6%9D%83-wxgetsetting">1.2检测授权 wx.getSetting</h3>
<p>代码案例：</p>
<p>pages/my/my.js</p>
<pre class="hljs"><code><div>   wx.getSetting({
      <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (res.authSetting[<span class="hljs-string">'scope.userInfo'</span>]) {
          <span class="hljs-comment">//用户已经授权，通过wx.getUserInfo可以获取用户信息</span>
          wx.getUserInfo({
            <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
              <span class="hljs-keyword">this</span>.setData({
                <span class="hljs-attr">userInfo</span>: res.userInfo,
                <span class="hljs-attr">isLogin</span>: <span class="hljs-literal">true</span>
              })
            }
          })
        }
      }
    })
</div></code></pre>
<h2 id="2%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF">2.获取用户信息</h2>
<h3 id="21%E8%BF%9B%E8%A1%8C%E6%8E%88%E6%9D%83">2.1进行授权</h3>
<p>代码案例：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h3 id="22button%E5%BD%A2%E5%BC%8F">2.2button形式</h3>
<ul>
<li>
<p>点击button，弹出授权框</p>
<p>设置一个button，设置open-type=&quot;getUserInfo&quot;</p>
<p>绑定事件：bindgetuserinfo=&quot;getInfo&quot;</p>
</li>
</ul>
<p>代码案例：</p>
<p>pages/my/my.wxml</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{isLogin}}"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"head"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{userInfo.avatarUrl}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>{{userInfo.nickName}}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">wx:else</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"getUserInfo"</span> <span class="hljs-attr">bindgetuserinfo</span>=<span class="hljs-string">"getInfo"</span>&gt;</span>登录<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

</div></code></pre>
<ul>
<li>
<p>api获取用户信息</p>
<p>页面加载，onLoad的时候，通过api获取用户信息</p>
<p>api有两个：wx.getSetting和wx.getUserInfo</p>
</li>
</ul>
<p>pages/my/my.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">const</span> app=getApp()      <span class="hljs-comment">//获取小程序实例</span>

Page({
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">isLogin</span>: <span class="hljs-literal">false</span>,    <span class="hljs-comment">//false 没有授权;true 已经授权</span>
    <span class="hljs-attr">userInfo</span>: <span class="hljs-literal">null</span>,
  },
  <span class="hljs-comment">//页面加载，获取用户信息</span>
  onLoad() {
    <span class="hljs-keyword">let</span> userInfo=app.globalData.userInfo;
    <span class="hljs-comment">//如果没有获取到userInfo，则定义一个函数myInfo，这个函数在app.js中调用</span>
    <span class="hljs-keyword">if</span>(userInfo==<span class="hljs-literal">null</span>){
      app.myInfo=<span class="hljs-function">(<span class="hljs-params">res</span>)=&gt;</span>{
        <span class="hljs-keyword">this</span>.setData({
          <span class="hljs-attr">userInfo</span>:res.userInfo,
          <span class="hljs-attr">isLogin</span>:<span class="hljs-literal">true</span>
        })
      }
    }

   
  },
  <span class="hljs-comment">//点击事件</span>
  getInfo(e) {
    <span class="hljs-keyword">let</span> userInfo = e.detail.userInfo;
    <span class="hljs-keyword">this</span>.setData({
      userInfo,
      <span class="hljs-attr">isLogin</span>: <span class="hljs-literal">true</span>
    })
  }
})
</div></code></pre>
<ul>
<li>小程序初始化的时候，获取用户信息，存储到globalData</li>
</ul>
<p>app.js</p>
<pre class="hljs"><code><div>App({
  onLaunch() {
    <span class="hljs-comment">//获取用户授权信息</span>
    wx.getSetting({
      <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (res.authSetting[<span class="hljs-string">'scope.userInfo'</span>]) {
          <span class="hljs-comment">//用户已经授权，通过wx.getUserInfo可以获取用户信息</span>
          wx.getUserInfo({
            <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
              <span class="hljs-keyword">this</span>.globalData.userInfo = res.userInfo;
              <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.myInfo) {
                <span class="hljs-keyword">this</span>.myInfo(res)
              }

            }
          })
        }
      }
    })


  },
  <span class="hljs-comment">// myInfo(res) {</span>

  <span class="hljs-comment">// },</span>
  <span class="hljs-attr">globalData</span>: {
    <span class="hljs-attr">userInfo</span>: <span class="hljs-literal">null</span>
  }
})
</div></code></pre>
<h1 id="%E7%AC%AC10%E5%A4%A9">第10天</h1>
<h1 id="%E4%B8%80uni-app%E6%A1%86%E6%9E%B6">一.uni-app框架</h1>
<h2 id="1%E6%A1%86%E6%9E%B6%E4%BB%8B%E7%BB%8D">1.框架介绍</h2>
<p><strong>概述</strong></p>
<pre class="hljs"><code><div>uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
</div></code></pre>
<p><strong>好处</strong></p>
<pre class="hljs"><code><div>一套代码编到10个平台
</div></code></pre>
<h2 id="2%E5%AE%98%E6%96%B9%E7%BD%91%E5%9D%80">2.官方网址</h2>
<pre class="hljs"><code><div>https://uniapp.dcloud.net.cn/
</div></code></pre>
<h1 id="%E4%BA%8C%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA">二、项目创建</h1>
<h2 id="1%E4%BD%BF%E7%94%A8%E5%B7%A5%E5%85%B7%E5%88%9B%E5%BB%BA%E6%8E%A8%E8%8D%90">1.使用工具创建（推荐）</h2>
<h3 id="11%E4%B8%8B%E8%BD%BD%E5%B7%A5%E5%85%B7">1.1下载工具</h3>
<pre class="hljs"><code><div>Hbuider
</div></code></pre>
<h3 id="12%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%E6%B5%81%E7%A8%8B">1.2创建项目流程</h3>
<p><img src="images/image-20210315084144441.png" alt=""></p>
<h3 id="13%E8%BF%90%E8%A1%8C">1.3运行</h3>
<p><strong>运行到浏览器</strong></p>
<p><img src="images/image-20210315085715814.png" alt="image-20210315085715814"></p>
<p><strong>运行到小程序开发工具</strong></p>
<p>打开小程序服务端口</p>
<p><img src="images/image-20210315085038839.png" alt="image-20210315085038839"></p>
<p>小程序开发工具报错：</p>
<p><img src="images/image-20210315085213830.png" alt="image-20210315085213830"></p>
<p>解决办法：填写appid即可</p>
<h2 id="2%E4%BD%BF%E7%94%A8%E8%84%9A%E6%89%8B%E6%9E%B6cli%E4%BA%86%E8%A7%A3">2使用脚手架（cli了解）</h2>
<p><strong>步骤</strong></p>
<p>全局安装脚手架</p>
<pre class="hljs"><code><div>npm install -g @vue/cli
</div></code></pre>
<p>创建uni-app</p>
<pre class="hljs"><code><div>vue create -p dcloudio/uni-preset-vue my-project
</div></code></pre>
<h1 id="%E4%B8%89%E5%88%9B%E5%BB%BA%E9%A1%B5%E9%9D%A2%E5%8F%8A%E5%88%9B%E5%BB%BA%E5%BA%95%E9%83%A8tab">三、创建页面及创建底部tab</h1>
<h2 id="1%E5%88%9B%E5%BB%BA%E9%A1%B5%E9%9D%A2">1.创建页面</h2>
<p><img src="images/image-20210315091828460.png" alt="image-20210315091828460"></p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="2%E5%88%9B%E5%BB%BA%E5%BA%95%E9%83%A8tab">2创建底部tab</h2>
<p><img src="images/image-20210315095125482.png" alt="image-20210315095125482"></p>
<p>page.json</p>
<pre class="hljs"><code><div>	<span class="hljs-string">"tabBar"</span>:{
		<span class="hljs-attr">"color"</span>:<span class="hljs-string">"#333333"</span>,
		<span class="hljs-attr">"selectedColor"</span>:<span class="hljs-string">"#ff0000"</span>,
		<span class="hljs-attr">"list"</span>:[
			{
				<span class="hljs-attr">"pagePath"</span>:<span class="hljs-string">"pages/index/index"</span>,
				<span class="hljs-attr">"iconPath"</span>:<span class="hljs-string">"/static/home.png"</span>,
				<span class="hljs-attr">"selectedIconPath"</span>:<span class="hljs-string">"/static/home-selected.png"</span>,
				<span class="hljs-attr">"text"</span>:<span class="hljs-string">"首页"</span>
			},
			{
				<span class="hljs-attr">"pagePath"</span>:<span class="hljs-string">"pages/my/my"</span>,
				<span class="hljs-attr">"iconPath"</span>:<span class="hljs-string">"/static/my.png"</span>,
				<span class="hljs-attr">"selectedIconPath"</span>:<span class="hljs-string">"/static/my-selected.png"</span>,
				<span class="hljs-attr">"text"</span>:<span class="hljs-string">"我的"</span>
			}
		]
		
	},
</div></code></pre>
<h1 id="%E5%9B%9B%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95">四.基础语法</h1>
<p>视图层向逻辑层传参：使用vue语法</p>
<pre class="hljs"><code><div>	<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toDetail(1001)"</span>&gt;</span>detail<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
</div></code></pre>
<p>详情页加载，接收参数：在onLoad里面接收</p>
<pre class="hljs"><code><div>onLoad(e){
    <span class="hljs-keyword">let</span> id=e.id;		<span class="hljs-comment">//接收id</span>
    <span class="hljs-keyword">this</span>.id=id;
},
</div></code></pre>
<p><strong>数据绑定、属性绑定、事件绑定及传参接参、列表渲染、条件渲染</strong></p>
<p>案例代码</p>
<pre class="hljs"><code><div>&lt;view class=&quot;item&quot; v-for=&quot;(item,index) in list&quot; :key=&quot;item.id&quot;&gt;
			姓名：{{item.name}}
		&lt;/view&gt;
</div></code></pre>
<h1 id="%E4%BA%94uni-app%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F">五.uni-app全局变量</h1>
<p>app.vue中设置全局变量</p>
<p>/app.vue</p>
<pre class="hljs"><code><div>&lt;script&gt;
	<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
		<span class="hljs-attr">onLaunch</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App Launch'</span>)
		},
		<span class="hljs-attr">onShow</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App Show'</span>)
		},
		<span class="hljs-attr">onHide</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App Hide'</span>)
		},
		<span class="hljs-attr">globalData</span>:{
			<span class="hljs-attr">userInfo</span>:{
				<span class="hljs-attr">name</span>:<span class="hljs-string">"孙悟空"</span>,
				<span class="hljs-attr">weight</span>:<span class="hljs-number">70</span>
			}
		}
	}
&lt;<span class="hljs-regexp">/script&gt;
</span></div></code></pre>
<p>pages/detail/detail.vue</p>
<pre class="hljs"><code><div>&lt;script&gt;
	const app=getApp()			//获取app实例
	export default {
		data() {
			return {
				id:0,
				userInfo:{}			//userInfo的默认值
			}
		},
		onLoad(e){
			this.userInfo=app.globalData.userInfo;		//把全局变量渲染到页面

		},
		methods: {
			
		}
	}
&lt;/script&gt;
</div></code></pre>
<p>发送网络请求</p>
<img src="images/image-20210315100912138.png" alt="image-20210315100912138" style="zoom:80%;" />
<pre class="hljs"><code><div>&lt;template&gt;
	&lt;view&gt;
		&lt;view class=&quot;item&quot; v-for=&quot;(item,index) in list&quot; :key=&quot;item.id&quot;&gt;
			&lt;image :src=&quot;item.img&quot; mode=&quot;&quot;&gt;&lt;/image&gt;
			&lt;view class=&quot;main&quot;&gt;
				{{item.hosName}}
			&lt;/view&gt;
			
		&lt;/view&gt;
	&lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
	export default {
		data() {
			return {
				list:[]
				
			}
		},
		onLoad(){
			let url=&quot;https://route.showapi.com/87-60?showapi_appid=190342&amp;showapi_sign=ec03f001017945e89d21ebe515bc02f4&amp;provinceName=%E5%8C%97%E4%BA%AC&amp;page=1&quot;
			uni.request({
				url,
				success:res=&gt;{
					this.list=res.data.showapi_res_body.hospitalList
				}
			})
			
		},
		methods: {
			
		}
	}
&lt;/script&gt;
</div></code></pre>
<h2 id="1-%E6%A8%A1%E5%9D%97%E5%8C%96">1. 模块化</h2>
<p><strong>语法参考</strong></p>
<pre class="hljs"><code><div>
</div></code></pre>
<p>代码案例</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="2%E6%8C%82%E8%BD%BD%E5%8E%9F%E5%9E%8B">2.挂载原型</h2>
<p><strong>语法参考</strong></p>
<pre class="hljs"><code><div>
</div></code></pre>
<p>代码案例</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="3globaldata%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F">3.globalData全局变量</h2>
<p><strong>语法参考</strong></p>
<pre class="hljs"><code><div>&lt;script&gt;
	<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
		<span class="hljs-attr">onLaunch</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App Launch'</span>)
		},
		<span class="hljs-attr">onShow</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App Show'</span>)
		},
		<span class="hljs-attr">onHide</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App Hide'</span>)
		},
		<span class="hljs-attr">globalData</span>:{
			<span class="hljs-attr">userInfo</span>:{
				<span class="hljs-attr">name</span>:<span class="hljs-string">"孙悟空"</span>,
				<span class="hljs-attr">weight</span>:<span class="hljs-number">70</span>
			}
		}
	}
&lt;<span class="hljs-regexp">/script&gt;
</span></div></code></pre>
<p>代码案例</p>
<pre class="hljs"><code><div>&lt;script&gt;
	<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
		<span class="hljs-attr">onLaunch</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App Launch'</span>)
		},
		<span class="hljs-attr">onShow</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App Show'</span>)
		},
		<span class="hljs-attr">onHide</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App Hide'</span>)
		},
		<span class="hljs-attr">globalData</span>:{
			<span class="hljs-attr">userInfo</span>:{
				<span class="hljs-attr">name</span>:<span class="hljs-string">"孙悟空"</span>,
				<span class="hljs-attr">weight</span>:<span class="hljs-number">70</span>
			}
		}
	}
&lt;<span class="hljs-regexp">/script&gt;
</span></div></code></pre>
<p>设置代理：</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h2 id="4%E5%A4%84%E7%90%86%E8%B7%A8%E5%9F%9F">4.处理跨域</h2>
<p>在用浏览器访问服务器的时候，如果运行uni-app的域名（或端口）和服务器端的域名（或端口）不一致，则会出现跨域的问题。</p>
<p><img src="images/image-20210315131814364.png" alt="image-20210315131814364"></p>
<h3 id="%E5%90%8E%E7%AB%AF%E8%A7%A3%E5%86%B3">后端解决：</h3>
<p>/server/app.js</p>
<pre class="hljs"><code><div>
<span class="hljs-keyword">const</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">"express"</span>)
<span class="hljs-keyword">const</span> app=express()


<span class="hljs-comment">//安装cors模块就可以，专门处理跨域的问题</span>
<span class="hljs-keyword">const</span> cors=<span class="hljs-built_in">require</span>(<span class="hljs-string">"cors"</span>)
app.use(cors())

app.get(<span class="hljs-string">"/api/list"</span>,(req,res)=&gt;{
	<span class="hljs-keyword">let</span> arr=[<span class="hljs-string">"北京"</span>,<span class="hljs-string">"上海"</span>,<span class="hljs-string">"广州"</span>,<span class="hljs-string">"深圳"</span>];
	res.json(arr)
})



app.listen(<span class="hljs-number">3000</span>,res=&gt;{
	<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"----3000-----"</span>)
})
</div></code></pre>
<p>uniapp端</p>
<p>/pages/demo/demo.vue</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"myRequest"</span>&gt;</span>发送请求<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
	<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
	<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
		data() {
			<span class="hljs-keyword">return</span> {
				
			}
		},
		<span class="hljs-attr">methods</span>: {
			myRequest(){
				uni.request({
					<span class="hljs-comment">// url:"/api/list",</span>
					<span class="hljs-attr">url</span>:<span class="hljs-string">"http://localhost:3000/api/list"</span>,
					<span class="hljs-attr">success</span>:<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
						<span class="hljs-built_in">console</span>.log(res)
					}
				})
			}
			
			
		}
	}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>
<h3 id="%E5%89%8D%E7%AB%AF%E8%A7%A3%E5%86%B3">前端解决</h3>
<p><img src="images/image-20210315112259451.png" alt="image-20210315112259451"></p>
<p>如果请求的路由是/api开头的，那么就把请求转发到 http://localhost:3000</p>
<p><strong>代码案例：</strong></p>
<p>/mainfest.json</p>
<pre class="hljs"><code><div><span class="hljs-string">"h5"</span>: {
		<span class="hljs-attr">"title"</span>: <span class="hljs-string">"h5"</span>,
		<span class="hljs-attr">"devServer"</span>: {
			<span class="hljs-attr">"proxy"</span>: {
				<span class="hljs-attr">"/api"</span>: {
					<span class="hljs-attr">"target"</span>: <span class="hljs-string">"http://localhost:3000"</span>
				}
			}
		}

	}
</div></code></pre>
<p>/pages/demo/demo.vue</p>
<pre class="hljs"><code><div>&lt;template&gt;
	&lt;view&gt;
		&lt;button type=&quot;primary&quot; @click=&quot;myRequest&quot;&gt;发送请求&lt;/button&gt;
	&lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			myRequest(){
				let url=&quot;&quot;;
				
				
				// #ifdef H5
				url=&quot;/api/list&quot;
				// #endif
				
				// #ifndef H5
				url=&quot;http://localhost:3000/api/list&quot;
				// #endif
				
				uni.request({
					url:url,
					success:res=&gt;{
						console.log(res)
						
					}
				})
			}
			
			
		}
	}
&lt;/script&gt;

&lt;style&gt;

&lt;/style&gt;

</div></code></pre>
<h2 id="5%E5%B0%81%E8%A3%85http%E5%87%BD%E6%95%B0">5.封装http函数</h2>
<p>封装http函数，返回promise，把异步转成同步</p>
<p>/utils/http.js</p>
<pre class="hljs"><code><div>
<span class="hljs-keyword">import</span> {config} <span class="hljs-keyword">from</span> <span class="hljs-string">"./config.js"</span>

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">http</span>(<span class="hljs-params">{url=<span class="hljs-string">""</span>,data={}}</span>)</span>{
	<span class="hljs-comment">// 进行平台判断</span>
	<span class="hljs-comment">// #ifndef H5</span>
		url=config.baseUrl+url
	<span class="hljs-comment">// #endif</span>
	
	<span class="hljs-comment">//返回promise </span>
	<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>{
		uni.request({
			<span class="hljs-attr">url</span>:url,
			<span class="hljs-attr">data</span>:data,
			<span class="hljs-attr">success</span>:<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
				resolve(res)
			},
			<span class="hljs-attr">fail</span>:<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{
				reject(err)
			}
		})
	})
	
}

<span class="hljs-keyword">export</span> {http}
</div></code></pre>
<p>定义基地址</p>
<p>/utils/config.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">const</span> config={
	<span class="hljs-attr">baseUrl</span>:<span class="hljs-string">"http://localhost:3000"</span>
}

<span class="hljs-keyword">export</span> {config}
</div></code></pre>
<p>挂在到vue原型</p>
<p>/main.js</p>
<pre class="hljs"><code><div><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span>

Vue.config.productionTip = <span class="hljs-literal">false</span>

App.mpType = <span class="hljs-string">'app'</span>

<span class="hljs-comment">//把http挂载到vue原型</span>
<span class="hljs-keyword">import</span> {http} <span class="hljs-keyword">from</span> <span class="hljs-string">"./utils/http.js"</span>;
Vue.prototype.$http=http;

<span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Vue({
    ...App
})
app.$mount()

</div></code></pre>
<p>pages/demo1/demo1.vue</p>
<pre class="hljs"><code><div>	<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
		data() {
			<span class="hljs-keyword">return</span> {
				
			}
		},
		<span class="hljs-keyword">async</span> onLoad(){
			<span class="hljs-comment">//发送网络请求，使用http函数发送网络请求</span>
			<span class="hljs-keyword">let</span> result =<span class="hljs-keyword">await</span> <span class="hljs-keyword">this</span>.$http({<span class="hljs-attr">url</span>:<span class="hljs-string">"/api/list"</span>,<span class="hljs-attr">data</span>:{<span class="hljs-attr">id</span>:<span class="hljs-number">1001</span>}}).catch(<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{
				<span class="hljs-built_in">console</span>.error(err)
			})
			<span class="hljs-built_in">console</span>.log(result)
		},
		<span class="hljs-attr">methods</span>: {
			
		}
	}
</div></code></pre>
<h2 id="4%E7%BC%93%E5%AD%98">4.缓存</h2>
<p><img src="images/image-20210315135319920.png" alt="image-20210315135319920"></p>
<p><strong>语法参考</strong></p>
<pre class="hljs"><code><div>uni.setStorageSync(&quot;name&quot;,&quot;张三&quot;)
</div></code></pre>
<p>代码案例</p>
<pre class="hljs"><code><div>
</div></code></pre>
<h1 id="%E5%85%AD%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC">六.页面跳转</h1>
<h2 id="1%E8%B7%B3%E8%BD%AC%E6%96%B9%E5%BC%8F">1.跳转方式</h2>
<p><strong>语法参考</strong></p>
<pre class="hljs"><code><div>uni.navigateTo   跳转普通页，可以回退
uni.recirect     跳转普通页，不能回退
uni.reLaunch     所有页面
uni.switchTab    调换tabBar页面
uni.navigateBack  页面回退
</div></code></pre>
<h2 id="2%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0">2.传递参数</h2>
<p>代码案例</p>
<pre class="hljs"><code><div><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{
    	<span class="hljs-attr">methods</span>: {
			toDetail(id){
				uni.navigateTo({
					<span class="hljs-attr">url</span>:<span class="hljs-string">"/pages/detail/detail?id="</span>+id
				})
			}
		}
}
</div></code></pre>
<h2 id="3%E6%8E%A5%E6%94%B6%E5%8F%82%E6%95%B0">3.接收参数</h2>
<p>在onLoad里面接收参数</p>
<p><strong>语法参考</strong></p>
<pre class="hljs"><code><div>onLoad(e){
    <span class="hljs-keyword">let</span> id=e.id;		<span class="hljs-comment">//接收id</span>
    <span class="hljs-keyword">this</span>.id=id;
},
</div></code></pre>
<h1 id="%E4%B8%83uni-app%E8%AF%AD%E6%B3%95">七、uni-app语法</h1>
<h2 id="1%E7%8E%AF%E5%A2%83%E5%88%A4%E6%96%AD">1.环境判断</h2>
<ul>
<li>开发环境</li>
<li>生产环境</li>
</ul>
<p><strong>语法参考</strong></p>
<pre class="hljs"><code><div><span class="hljs-keyword">if</span>(process.env.NODE_ENV === <span class="hljs-string">'development'</span>){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'开发环境'</span>)
}<span class="hljs-keyword">else</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'生产环境'</span>)
}
</div></code></pre>
<h2 id="2%E5%B9%B3%E5%8F%B0%E5%88%A4%E6%96%AD">2.平台判断</h2>
<p><strong>目的</strong></p>
<pre class="hljs"><code><div>// #ifdef  H5
// #endif

// #ifndef  H5
// #endif
</div></code></pre>
<h1 id="%E5%85%AB%E9%A1%B9%E7%9B%AE%E5%B0%8Fu%E5%95%86%E5%9F%8E">八、项目【小U商城】</h1>
<h2 id="1%E9%A1%B9%E7%9B%AE%E5%90%AF%E5%8A%A8">1.项目启动</h2>
<p><img src="images/image-20210315144744750.png" alt="image-20210315144744750"></p>
<h3 id="%E5%AE%89%E8%A3%85%E6%95%B0%E6%8D%AE%E5%BA%93">安装数据库</h3>
<p>用phpstudy安装mysql数据库，安装后启动数据库</p>
<p><img src="images/image-20210315152319173.png" alt="image-20210315152319173"></p>
<h3 id="navicat%E8%BF%9E%E6%8E%A5%E6%95%B0%E6%8D%AE%E5%BA%93">navicat连接数据库</h3>
<p>1.navicat创建连接</p>
<p><img src="images/image-20210315145904657.png" alt="image-20210315145904657"></p>
<h3 id="%E5%88%9B%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%BA%93mydb">创建数据库mydb</h3>
<p><img src="images/image-20210315150013183.png" alt="image-20210315150013183"></p>
<p>字符集：</p>
<ul>
<li>AscII码：  英文   ---&gt;编码</li>
<li>latin码：  拉丁文----&gt;编码</li>
<li>存储中文：GB2312    GBK</li>
<li>utf-8：</li>
<li>utf-16</li>
</ul>
<h3 id="%E8%BF%90%E8%A1%8Cnode%E6%8E%A5%E5%8F%A3">运行node接口</h3>
<p>在node项目目录下运行</p>
<pre class="hljs"><code><div>npm run start
</div></code></pre>
<h3 id="%E8%BF%90%E8%A1%8Cuniapp">运行uniapp</h3>
<p>接口文档：https://shimo.im/docs/XvPh9cVWKpXdKcqQ/read</p>
<h2 id="2%E9%A6%96%E9%A1%B5%E6%95%B0%E6%8D%AE">2.首页数据</h2>
<h3 id="21%E8%8E%B7%E5%8F%96%E9%A6%96%E9%A1%B5%E4%B8%80%E7%BA%A7%E5%88%86%E7%B1%BB">2.1获取首页一级分类</h3>
<p><img src="images/image-20210315161010837.png" alt="image-20210315161010837"></p>
<p><strong>接口</strong></p>
<pre class="hljs"><code><div>http:<span class="hljs-comment">//localhost:3000/api/getcate</span>
</div></code></pre>
<p><strong>数据请求</strong></p>
<p>(1)获取一级分类</p>
<p>代码案例</p>
<pre class="hljs"><code><div>&lt;script&gt;
	<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{
		data(){
			<span class="hljs-keyword">return</span>{
				<span class="hljs-attr">tabList</span>:[],		<span class="hljs-comment">//导航栏数组</span>
				<span class="hljs-attr">activeIndex</span>:<span class="hljs-number">0</span>,		<span class="hljs-comment">//tab默认选中下标是0</span>
			}
		},
		onLoad(){
			uni.request({
				<span class="hljs-attr">url</span>:<span class="hljs-string">"http://localhost:3000/api/getcate"</span>,
				<span class="hljs-attr">success</span>:<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
					<span class="hljs-keyword">this</span>.tabList=res.data.list
				},
				<span class="hljs-attr">fail</span>:<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{
					<span class="hljs-built_in">console</span>.log(err)
				}
			})
		},
		<span class="hljs-attr">methods</span>:{
			tabClick(index){
				<span class="hljs-comment">// console.log(index)</span>
				<span class="hljs-keyword">this</span>.activeIndex=index;
			}
		}
	}
&lt;<span class="hljs-regexp">/script&gt;
</span></div></code></pre>
<p>(2)选项卡切换</p>
<p>代码案例</p>
<pre class="hljs"><code><div><span class="hljs-comment">&lt;!-- 顶部导航  scroll-view --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tabs"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">scroll-view</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab-bar"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"scroll-h"</span> <span class="hljs-attr">:scroll-x</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">:show-scrollbar</span>=<span class="hljs-string">"false"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"uni-tab-item"</span>  <span class="hljs-attr">data-current</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item,index) in tabList"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.id"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"tabClick(index)"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"uni-tab-item-title"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"activeIndex==index?'uni-tab-item-title-active':''"</span>&gt;</span>
                {{item.catename}}
            <span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-name">scroll-view</span>&gt;</span> 
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</div></code></pre>
<h1 id="%E7%AC%AC%E5%8D%81%E4%B8%80%E5%A4%A9">第十一天</h1>
<h1 id="%E4%B8%80%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96">一、数据可视化</h1>
<h2 id="1%E6%A6%82%E5%BF%B5">1.概念</h2>
<p>数据可视化Data Visualization:就是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息直接展现于人们面前。</p>
<h2 id="2%E5%B8%B8%E8%A7%81%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF">2.常见使用场景</h2>
<p>(1)媒体大屏
适合展会、媒体访问等公众场合，是企业形象、品牌展示的窗口；
(2)接待大屏
适用企业内部宣传专区，用于接待来访领导、客户或投资。
(3)监控大屏
针对企业运营或运维监控需求，比较适用内部指挥监控等；
(4)科技大屏
滴滴出行大数据、天猫双十一交易数据、茅台数博会大屏等;</p>
<h2 id="3%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B7%A5%E5%85%B7">3.数据可视化工具</h2>
<h3 id="31%E7%BB%98%E5%9B%BE%E5%AE%B9%E5%99%A8">3.1绘图容器</h3>
<pre class="hljs"><code><div>&lt;canvas&gt;&lt;/canvas&gt;
</div></code></pre>
<h3 id="32%E7%BB%98%E5%9B%BE%E5%B7%A5%E5%85%B7">3.2绘图工具</h3>
<pre class="hljs"><code><div>let ctx=canvas.getContext(&quot;2d&quot;)
</div></code></pre>
<h1 id="%E4%BA%8Ccanvas%E7%BB%98%E5%9B%BE%E5%AE%B9%E5%99%A8">二.Canvas绘图容器</h1>
<h2 id="1%E4%BB%80%E4%B9%88%E6%98%AFcanvas">1.什么是Canvas？</h2>
<p>Canvas标签用于绘制图形的 HTML 元素,canvas元素本身并没有绘制能力,它仅仅是图形的容器,通常通过JavaScript脚本进行绘制。canvas最早由Apple引入WebKit，用于MacOSX的Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。</p>
<p>Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。</p>
<h2 id="2%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF">2.应用场景</h2>
<h2 id="3canvas%E5%92%8Csvg%E7%9A%84%E5%8C%BA%E5%88%AB">3.Canvas和SVG的区别</h2>
<p>Canvas
依赖分辨率
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
SVG
不依赖分辨率
最适合带有大型渲染区域的应用程序（比如谷歌地图）
不适合游戏应用</p>
<h2 id="4%E5%88%9D%E8%AF%86canvas%E6%A0%87%E7%AD%BE%E5%92%8Ccanvas%E5%AF%B9%E8%B1%A1">4.初识Canvas标签和Canvas对象</h2>
<h3 id="41canvas%E6%A0%87%E7%AD%BE">4.1canvas标签</h3>
<pre class="hljs"><code><div><span class="hljs-comment">//获取画布</span>
<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
</div></code></pre>
<h3 id="42canvas%E4%B8%8A%E4%B8%8B%E6%96%87%E5%AF%B9%E8%B1%A1">4.2canvas上下文对象</h3>
<pre class="hljs"><code><div><span class="hljs-comment">//获取上下文</span>
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);
</div></code></pre>
<h2 id="5%E8%AE%A4%E8%AF%86%E7%BA%BF%E6%9D%A1">5.认识线条</h2>
<h3 id="51%E7%94%BB%E5%B8%83%E6%A0%85%E6%A0%BC%E5%8F%8A%E5%9D%90%E6%A0%87%E7%A9%BA%E9%97%B4">5.1画布栅格及坐标空间</h3>
<p>(1)canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。
(2)栅格的起点为左上角[坐标为(0,0)]所有元素的位置都相对于原点定位。</p>
<h3 id="52%E7%BA%BF%E6%9D%A1%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7%E5%8F%8A%E6%96%B9%E6%B3%95">5.2线条相关属性及方法</h3>
<pre class="hljs"><code><div>moveTo(x,y)把路径移动到画布中的指定点，不创建线条
lineTo(x,y)添加一个新点,绘制一条从当前位置到指定新点(x,y)位置的直线。
strokeStyle设置或返回描边颜色
fillStyle设置或返回填充颜色
lineWidth设置或返回当前的线条宽度
<span class="hljs-attr">lineJoin</span>:round| miter |bevel 设置或返回两条线相交时，所创建的拐角类型
<span class="hljs-attr">lineCap</span>:round | butt | square 设置或返回线条的结束端点样式
</div></code></pre>
<p><strong>代码案例</strong></p>
<p><img src="images/image-20210318091340353.png" alt="image-20210318091340353"></p>
<pre class="hljs"><code><div><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span> /&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1"</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>&gt;</span><span class="css">
			<span class="hljs-selector-tag">canvas</span>{
				<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#333</span>;
			}
		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
		<span class="hljs-comment">&lt;!-- canvas画布的大小，不能用css来调整，用属性来调整 --&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"canvas"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"600"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"400"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span>
		
	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript">
		<span class="hljs-comment">//获取画布</span>
		<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
		
		<span class="hljs-comment">//获取上下文</span>
		<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);
		
		
		ctx.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)				<span class="hljs-comment">//落笔在(0,0)	</span>
		ctx.strokeStyle=<span class="hljs-string">"red"</span>		<span class="hljs-comment">//线段描边的颜色：红色</span>
		ctx.lineWidth=<span class="hljs-number">10</span>			<span class="hljs-comment">//线段的宽度</span>
		ctx.lineTo(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)			<span class="hljs-comment">//画笔绘制(100,100)</span>
		ctx.lineTo(<span class="hljs-number">200</span>,<span class="hljs-number">100</span>)			<span class="hljs-comment">//画笔接着绘制到(200,100)</span>
		ctx.stroke()
		
		ctx.beginPath()				<span class="hljs-comment">//新起一条路径</span>
		
		ctx.lineWidth=<span class="hljs-number">10</span>			<span class="hljs-comment">//线段的宽度</span>
		ctx.strokeStyle=<span class="hljs-string">"green"</span>;
		ctx.moveTo(<span class="hljs-number">200</span>,<span class="hljs-number">100</span>)
		ctx.lineTo(<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
		
		
		ctx.stroke()				<span class="hljs-comment">//画笔描边</span>
		
		
	</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</div></code></pre>
<p>效果图</p>
<p><img src="images/image-20210318095812878.png" alt="image-20210318095812878"></p>
<pre class="hljs"><code><div>	<span class="hljs-comment">//获取画布</span>
		<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
		<span class="hljs-comment">//获取上下文</span>
		<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);
		
		ctx.moveTo(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)
		ctx.lineTo(<span class="hljs-number">200</span>,<span class="hljs-number">100</span>)
		ctx.lineTo(<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
		
		ctx.lineJoin=<span class="hljs-string">"bevel"</span>			<span class="hljs-comment">//线段交汇处：斜角</span>
		ctx.lineJoin=<span class="hljs-string">"round"</span>			<span class="hljs-comment">//线段交汇处：圆角</span>
		ctx.strokeStyle=<span class="hljs-string">"red"</span>
		ctx.lineWidth=<span class="hljs-number">10</span>
		ctx.stroke()
</div></code></pre>
<h3 id="53%E6%8F%8F%E8%BE%B9%E4%B8%8E%E5%A1%AB%E5%85%85">5.3描边与填充</h3>
<pre class="hljs"><code><div>stroke()
	描边已定义绘图（路径）
fill()
	填充当前绘图（z路径）
</div></code></pre>
<h3 id="54%E7%BB%98%E5%88%B6%E8%B7%AF%E5%BE%84">5.4绘制路径</h3>
<pre class="hljs"><code><div>beginPath()
	新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。生成路径的第一步叫做beginPath()。
closePath()
	闭合路径之后图形绘制命令又重新指向到上下文中。不是必需的。
</div></code></pre>
<p><strong>代码案例</strong></p>
<p><img src="images/image-20210318095727248.png" alt="image-20210318095727248"></p>
<pre class="hljs"><code><div>	<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
		<span class="hljs-comment">//获取上下文</span>
		<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);
		
		ctx.moveTo(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)
		ctx.lineTo(<span class="hljs-number">200</span>,<span class="hljs-number">100</span>)
		ctx.lineTo(<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
		ctx.closePath()				<span class="hljs-comment">//自动闭合路径</span>
		
		ctx.strokeStyle=<span class="hljs-string">"red"</span>;
		ctx.lineWidth=<span class="hljs-number">10</span>

		ctx.stroke()
</div></code></pre>
<h2 id="6%E7%BB%98%E5%88%B6%E7%9F%A9%E5%BD%A2">6.绘制矩形</h2>
<pre class="hljs"><code><div><span class="hljs-number">1.</span>rect(x, y, width, height)
	将一个矩形路径增加到当前路径上,绘制一个左上角坐标为（x,y）,宽高为width以及height的矩形。需要配合fill()或者stroke()使用
	
<span class="hljs-number">2.</span>fillRect(x, y, width, height)
	 绘制一个填充的矩形

<span class="hljs-number">3.</span>strokeRect(x, y, width, height)
	绘制一个矩形的边框
	
<span class="hljs-number">4.</span>clearRect(x, y, width, height)
	清除指定矩形区域，让清除部分完全透明。
</div></code></pre>
<p><strong>代码案例</strong></p>
<p><img src="images/image-20210318101132037.png" alt="image-20210318101132037"></p>
<pre class="hljs"><code><div><span class="hljs-comment">//获取画布</span>
<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
<span class="hljs-comment">//获取上下文</span>
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);

<span class="hljs-comment">//填充矩形</span>
ctx.fillStyle=<span class="hljs-string">"red"</span>
ctx.fillRect(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)

<span class="hljs-comment">//绘制描边矩形</span>
ctx.strokeStyle=<span class="hljs-string">"green"</span>;		<span class="hljs-comment">//描边颜色绿色</span>
ctx.lineWidth=<span class="hljs-number">10</span>;				<span class="hljs-comment">//描边线条宽度10</span>
ctx.strokeRect(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)	<span class="hljs-comment">//描边矩形</span>
</div></code></pre>
<h3 id="%E7%9F%A9%E5%BD%A2%E9%99%8D%E8%90%BD">矩形降落</h3>
<p><img src="images/image-20210318105334941.png" alt="image-20210318105334941"></p>
<pre class="hljs"><code><div><span class="hljs-comment">//获取画布</span>
<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
<span class="hljs-comment">//获取上下文</span>
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);

<span class="hljs-comment">//最上居中，绘制一个矩形</span>
ctx.fillStyle=<span class="hljs-string">"red"</span>
<span class="hljs-keyword">let</span> y=<span class="hljs-number">0</span>
<span class="hljs-comment">//绘制矩形</span>
ctx.fillRect(<span class="hljs-number">0</span>,y,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)

setInterval(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
    <span class="hljs-comment">//擦除</span>
    ctx.clearRect(<span class="hljs-number">0</span>,y,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)

    y++;   <span class="hljs-comment">//1</span>
    ctx.fillRect(<span class="hljs-number">0</span>,y,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)


},<span class="hljs-number">10</span>)

</div></code></pre>
<h3 id="%E5%AF%B9%E8%A7%92%E7%BA%BF%E8%BF%90%E5%8A%A8">对角线运动</h3>
<p><img src="images/image-20210318113003351.png" alt="image-20210318113003351"></p>
<pre class="hljs"><code><div><span class="hljs-comment">//获取画布</span>
<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
<span class="hljs-comment">//获取上下文</span>
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);

<span class="hljs-comment">//左上角绘制实心矩形</span>
ctx.fillStyle=<span class="hljs-string">"red"</span>
ctx.fillRect(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">50</span>,<span class="hljs-number">50</span>)

<span class="hljs-keyword">let</span> x=<span class="hljs-number">0</span>,y=<span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> yDirection=<span class="hljs-literal">true</span>;		<span class="hljs-comment">//true 向下运动；false 向上运动</span>
setInterval(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
    ctx.clearRect(x,y,<span class="hljs-number">50</span>,<span class="hljs-number">50</span>)

    x++;
    <span class="hljs-keyword">if</span>(yDirection){
        y++
    }<span class="hljs-keyword">else</span>{
        y--;
    }

    <span class="hljs-keyword">if</span>(y&gt;=<span class="hljs-number">350</span>){
        yDirection=<span class="hljs-literal">false</span>;
    }


    <span class="hljs-comment">//当y&lt;=350的时候，y一直累加</span>
    <span class="hljs-comment">//当y&gt;350的时候，y一直累减</span>


    ctx.fillRect(x,y,<span class="hljs-number">50</span>,<span class="hljs-number">50</span>)
},<span class="hljs-number">20</span>)
</div></code></pre>
<h3 id="%E7%9B%92%E5%AD%90%E7%A2%B0%E6%92%9E%E8%BF%90%E5%8A%A8">盒子碰撞运动</h3>
<p><img src="images/image-20210318133725115.png" alt="image-20210318133725115"></p>
<p><strong>代码实现</strong></p>
<p>08对角线运动.html</p>
<pre class="hljs"><code><div><span class="hljs-comment">//获取画布</span>
<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
<span class="hljs-comment">//获取上下文</span>
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);

<span class="hljs-comment">//左上角绘制实心矩形</span>
ctx.fillStyle=<span class="hljs-string">"red"</span>
ctx.fillRect(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">50</span>,<span class="hljs-number">50</span>)

<span class="hljs-keyword">let</span> x=<span class="hljs-number">0</span>,y=<span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> yDirection=<span class="hljs-literal">true</span>;		<span class="hljs-comment">//true 向下运动；false 向上运动</span>
<span class="hljs-keyword">let</span> xDirection=<span class="hljs-literal">true</span>;		<span class="hljs-comment">//ture 向右运动；false 向左运动</span>
setInterval(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
    ctx.clearRect(x,y,<span class="hljs-number">50</span>,<span class="hljs-number">50</span>)

    <span class="hljs-comment">// x的累加或累减</span>
    <span class="hljs-keyword">if</span>(xDirection){
        x++
    }<span class="hljs-keyword">else</span>{
        x--
    }

    <span class="hljs-comment">//方块到达右侧的时候，x向左运动</span>
    <span class="hljs-keyword">if</span>(x&gt;=<span class="hljs-number">550</span>){
        xDirection=<span class="hljs-literal">false</span>;
    }

    <span class="hljs-comment">//方块到达左侧的时候，x向右运动</span>
    <span class="hljs-keyword">if</span>(x&lt;=<span class="hljs-number">0</span>){
        xDirection=<span class="hljs-literal">true</span>;
    }


    <span class="hljs-comment">//y累加或者累减</span>
    <span class="hljs-keyword">if</span>(yDirection){
        y++
    }<span class="hljs-keyword">else</span>{
        y--;
    }

    <span class="hljs-comment">//方块到达底部的时候，向上运动</span>
    <span class="hljs-keyword">if</span>(y&gt;=<span class="hljs-number">350</span>){
        yDirection=<span class="hljs-literal">false</span>;
    }

    <span class="hljs-comment">//方块到达顶部的时候，向下运动</span>
    <span class="hljs-keyword">if</span>(y&lt;=<span class="hljs-number">0</span>){
        yDirection=<span class="hljs-literal">true</span>;
    }


    <span class="hljs-comment">//当y&lt;=350的时候，y一直累加</span>
    <span class="hljs-comment">//当y&gt;350的时候，y一直累减</span>


    ctx.fillRect(x,y,<span class="hljs-number">50</span>,<span class="hljs-number">50</span>)
},<span class="hljs-number">10</span>)
</div></code></pre>
<h2 id="7%E7%BB%98%E5%88%B6%E6%96%87%E6%9C%AC">7.绘制文本</h2>
<pre class="hljs"><code><div>font文本内容的当前字体属性
textAlign文本内容的当前对齐方式:left| center | right
textBaseline 文本竖直方向对齐：  top | middle |bottom |alphabetic 
fillText(&quot;北京&quot;,x,y)在画布上绘制“被填充的”文本
strokeText()在画布上绘制文本（无填充）
</div></code></pre>
<p><strong>代码案例</strong></p>
<p>居中对齐</p>
<img src="images/image-20210318141722543.png" alt="image-20210318141722543"  />
<pre class="hljs"><code><div>
<span class="hljs-comment">//绘制竖线</span>
ctx.moveTo(<span class="hljs-number">100</span>,<span class="hljs-number">0</span>)
ctx.lineTo(<span class="hljs-number">100</span>,<span class="hljs-number">400</span>)
ctx.stroke()

<span class="hljs-comment">// 水平对齐</span>
ctx.font=<span class="hljs-string">"30px Arial"</span>;
ctx.textAlign=<span class="hljs-string">"left"</span>
ctx.textAlign=<span class="hljs-string">"center"</span>
<span class="hljs-comment">// ctx.textAlign="right"</span>
ctx.fillText(<span class="hljs-string">"后天周六了"</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)
</div></code></pre>
<p><strong>竖直方向对齐</strong></p>
<p><img src="images/image-20210318142404388.png" alt="image-20210318142404388"></p>
<p>09文本.html</p>
<pre class="hljs"><code><div><span class="hljs-comment">//水平直线</span>
ctx.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">100</span>)
ctx.lineTo(<span class="hljs-number">600</span>,<span class="hljs-number">100</span>)
ctx.stroke()

<span class="hljs-comment">//文本</span>
ctx.font=<span class="hljs-string">"30px Arial"</span>;
<span class="hljs-comment">//竖直方向对齐方式</span>
ctx.textBaseline=<span class="hljs-string">"middle"</span>;    <span class="hljs-comment">//top middle bottom alphabetic</span>
ctx.fillText(<span class="hljs-string">"马上周末了xX"</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)
</div></code></pre>
<h2 id="8%E7%BB%98%E5%88%B6%E5%9C%86%E5%BD%A2%E5%BC%A7%E5%BD%A2%E6%89%87%E5%BD%A2">8、绘制圆形、弧形、扇形</h2>
<pre class="hljs"><code><div>ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
	画一个以（x,y）为圆心的以r为半径的圆弧（圆），从sAngle开始到eAngle结束，按照counterclockwise给定的方向（默认为顺时针）生成，true代表逆时针，false代表顺时针。
</div></code></pre>
<p><img src="images/image-20210318144832282.png" alt="image-20210318144832282"></p>
<p>360度    角度</p>
<p>360度=2*PI</p>
<p>180度=PI</p>
<p>1度=Math.PI/180</p>
<pre class="hljs"><code><div><span class="hljs-comment">//获取画布</span>
<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
<span class="hljs-comment">//获取上下文</span>
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);

<span class="hljs-comment">//绘制弧线</span>

<span class="hljs-comment">//顺时针绘制半圆</span>
ctx.arc(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI,<span class="hljs-literal">false</span>)

<span class="hljs-comment">//逆时针绘制半圆</span>
ctx.arc(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI,<span class="hljs-literal">true</span>)

<span class="hljs-comment">//绘制四分之三圆</span>
ctx.arc(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">1.5</span>,<span class="hljs-literal">false</span>)

ctx.arc(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,-<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">1.5</span>,<span class="hljs-literal">true</span>)

<span class="hljs-comment">//绘制四分之一圆</span>
ctx.arc(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>,<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">2</span>,<span class="hljs-built_in">Math</span>.PI,<span class="hljs-literal">true</span>)
<span class="hljs-comment">// ctx.closePath()</span>


ctx.stroke()
ctx.fill()

</div></code></pre>
<p><img src="images/image-20210318153441381.png" alt="image-20210318153441381"></p>
<p><strong>代码案例</strong></p>
<pre class="hljs"><code><div>
ctx.arc(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>,<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">2</span>,<span class="hljs-built_in">Math</span>.PI,<span class="hljs-literal">true</span>)
ctx.lineTo(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>)
ctx.closePath()

<span class="hljs-comment">// ctx.stroke()</span>

ctx.fillStyle=<span class="hljs-string">"#ed1c24"</span>
ctx.fill()
</div></code></pre>
<h2 id="9%E7%A7%BB%E5%8A%A8%E5%9D%90%E6%A0%87%E7%B3%BB">9.移动坐标系</h2>
<p><img src="images/image-20210318153827911.png" alt="image-20210318153827911"></p>
<p>10弧线.html</p>
<pre class="hljs"><code><div>
<span class="hljs-comment">//移动坐标系</span>
ctx.translate(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>)
ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">2</span>,<span class="hljs-literal">false</span>)
ctx.stroke()
</div></code></pre>
<h2 id="9%E5%A4%AA%E6%9E%81%E5%9B%BE%E6%A1%88%E4%BE%8B">9.太极图案例</h2>
<p><img src="images/image-20210318162118268.png" alt="image-20210318162118268"></p>
<p><strong>代码案例</strong></p>
<pre class="hljs"><code><div><span class="hljs-comment">//获取画布</span>
<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
<span class="hljs-comment">//获取上下文</span>
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);


<span class="hljs-comment">//移动坐标系</span>
ctx.translate(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>)

<span class="hljs-comment">//绘制大圆</span>
ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">2</span>,<span class="hljs-literal">false</span>)
ctx.stroke()

<span class="hljs-comment">//上面最小黑圆</span>
ctx.beginPath()
ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">-100</span>,<span class="hljs-number">30</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">2</span>,<span class="hljs-literal">false</span>)
ctx.fillStyle=<span class="hljs-string">"black"</span>
ctx.fill()

<span class="hljs-comment">//绘制大圆</span>
ctx.beginPath()
ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>,<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">2</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">1.5</span>,<span class="hljs-literal">false</span>)
ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">-100</span>,<span class="hljs-number">100</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">1.5</span>,<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">2</span>,<span class="hljs-literal">true</span>)
ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">1.5</span>*<span class="hljs-built_in">Math</span>.PI,<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">2</span>,<span class="hljs-literal">false</span>)
ctx.fillStyle=<span class="hljs-string">"black"</span>;
ctx.fill()

<span class="hljs-comment">//下面最小白圆</span>
ctx.beginPath()
ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">100</span>,<span class="hljs-number">30</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">2</span>,<span class="hljs-literal">false</span>)
ctx.fillStyle=<span class="hljs-string">"white"</span>
ctx.fill()

</div></code></pre>
<h2 id="10%E5%A5%94%E9%A9%B0%E5%9B%BE%E6%A0%87">10.奔驰图标</h2>
<p><img src="images/image-20210318165502047.png" alt="image-20210318165502047"></p>
<p>12奔驰logo.html</p>
<pre class="hljs"><code><div><span class="hljs-comment">//获取画布</span>
<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
<span class="hljs-comment">//获取上下文</span>
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);


<span class="hljs-comment">//移动坐标系</span>
ctx.translate(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>)

<span class="hljs-comment">//绘制大圆</span>
ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">2</span>,<span class="hljs-literal">false</span>)

<span class="hljs-comment">//竖直向上</span>
ctx.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)
ctx.lineTo(<span class="hljs-number">0</span>,<span class="hljs-number">-200</span>)

<span class="hljs-comment">//右侧斜线</span>
<span class="hljs-keyword">let</span> angle1=<span class="hljs-number">30</span>*<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">180</span>
<span class="hljs-keyword">let</span> x1=<span class="hljs-number">200</span>*<span class="hljs-built_in">Math</span>.cos(angle1)
<span class="hljs-keyword">let</span> y1=<span class="hljs-number">200</span>*<span class="hljs-built_in">Math</span>.sin(angle1)

ctx.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)
ctx.lineTo(x1,y1)

<span class="hljs-comment">//左侧斜线</span>
<span class="hljs-keyword">let</span> angle2=<span class="hljs-number">150</span>*<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">180</span>
<span class="hljs-keyword">let</span> x2=<span class="hljs-number">200</span>*<span class="hljs-built_in">Math</span>.cos(angle2)
<span class="hljs-keyword">let</span> y2=<span class="hljs-number">200</span>*<span class="hljs-built_in">Math</span>.sin(angle2)

ctx.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)
ctx.lineTo(x2,y2)


ctx.stroke()

</div></code></pre>
<p><img src="images/image-20210318165159644.png" alt="image-20210318165159644"></p>
<h1 id="%E7%AC%AC%E5%8D%81%E4%BA%8C%E5%A4%A9">第十二天</h1>
<h1 id="%E4%B8%80canvas">一、canvas</h1>
<h2 id="1%E5%9D%90%E6%A0%87%E7%B3%BB%E6%97%8B%E8%BD%AC">1.坐标系旋转</h2>
<pre class="hljs"><code><div>1.旋转rotate(angle)
2.缩放scale(x, y)
3.移动translate(x, y)
4.Canvas状态
	save()
	保存画布(canvas)的所有状态
	restore()
	恢复 canvas 状态
</div></code></pre>
<p><strong>代码案例</strong></p>
<p>绘制奔驰：</p>
<p>1.向上画一条直线，顺时针旋转120度</p>
<p>2.向上画一条直线，顺时针旋转240度</p>
<pre class="hljs"><code><div>ctx.save()				//保存原来的坐标系
ctx.rotate(angle)			//旋转

ctx.restore()			//恢复原来的坐标系
</div></code></pre>
<p><img src="images/image-20210319090812386.png" alt="image-20210319090812386"></p>
<p>代码示例：</p>
<pre class="hljs"><code><div>		<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"canvas"</span>);
		<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);
		
		<span class="hljs-comment">//移动坐标系，坐标原点位于canvas中心</span>
		ctx.translate(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>)
		
		<span class="hljs-comment">//绘制大圆</span>
		ctx.beginPath()
		ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">2</span>,<span class="hljs-literal">false</span>)
		ctx.stroke()
		
		<span class="hljs-comment">//向上绘制一条竖线</span>
		ctx.beginPath()
		ctx.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)
		ctx.lineTo(<span class="hljs-number">0</span>,<span class="hljs-number">-200</span>)
		ctx.stroke()
		
		<span class="hljs-comment">//旋转坐标系120度，绘制一条线</span>
		ctx.save()
		ctx.rotate(<span class="hljs-number">120</span>*<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">180</span>)
			ctx.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)
			ctx.lineTo(<span class="hljs-number">0</span>,<span class="hljs-number">-200</span>)
			ctx.stroke()
		ctx.restore()
		
		<span class="hljs-comment">//旋转坐标系240度，绘制一条线</span>
		ctx.save()
		ctx.rotate(<span class="hljs-number">240</span>*<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">180</span>)
			ctx.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)
			ctx.lineTo(<span class="hljs-number">0</span>,<span class="hljs-number">-200</span>)
			ctx.stroke()
			
		ctx.restore()
		
</div></code></pre>
<h2 id="1%E7%BB%98%E5%88%B6%E9%98%B4%E5%BD%B1">1.绘制阴影</h2>
<pre class="hljs"><code><div>shadowColor     阴影颜色
shadowOffsetX   X轴偏移
shadowOffsetY   Y轴偏移
shadowBlur      模糊度
</div></code></pre>
<p><strong>代码案例</strong></p>
<p><img src="images/image-20210319092801466.png" alt="image-20210319092801466"></p>
<pre class="hljs"><code><div><span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"canvas"</span>);
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);

<span class="hljs-comment">//添加阴影</span>
ctx.shadowColor=<span class="hljs-string">"red"</span>
ctx.shadowOffsetX=<span class="hljs-number">50</span>;
ctx.shadowOffsetY=<span class="hljs-number">50</span>;
ctx.shadowBlur=<span class="hljs-number">10</span>

<span class="hljs-comment">//矩形</span>
ctx.fillRect(<span class="hljs-number">200</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">200</span>)
</div></code></pre>
<h2 id="2%E7%BB%98%E5%88%B6%E5%9B%BE%E5%83%8F">2.绘制图像</h2>
<pre class="hljs"><code><div>drawImage() 方法在画布上绘制图像
三个参数：context.drawImage(img,x,y);
五个参数：context.drawImage(img,x,y,width,height);
</div></code></pre>
<p><strong>代码案例</strong></p>
<pre class="hljs"><code><div><span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"canvas"</span>);
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);

<span class="hljs-keyword">let</span> img=<span class="hljs-keyword">new</span> Image()
img.src=<span class="hljs-string">"./static/葫芦娃.png"</span>;

<span class="hljs-comment">//图片加载完之后，再绘制图片</span>
img.onload=<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
ctx.drawImage(img,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)
}


</div></code></pre>
<h2 id="3canvas%E6%B8%90%E5%8F%98">3.canvas渐变</h2>
<h3 id="31%E4%BB%80%E4%B9%88%E6%98%AF%E6%B8%90%E5%8F%98">3.1什么是渐变？</h3>
<p>渐变是一种有规律性的变化,渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩</p>
<h3 id="32%E6%B8%90%E5%8F%98%E7%9A%84%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF">3.2渐变的使用场景</h3>
<p>处理图表、处理文字、处理图片、用做背景</p>
<h3 id="33createlineargradient%E7%BA%BF%E6%80%A7%E6%B8%90%E5%8F%98">3.3createLinearGradient线性渐变</h3>
<pre class="hljs"><code><div><span class="hljs-keyword">let</span> linearGradient=ctx.createLinearGradient(x1,y1,x2,y2)
linearGradient.addColorStop(<span class="hljs-number">0</span>,<span class="hljs-string">"red"</span>)
</div></code></pre>
<p><strong>代码案例</strong></p>
<pre class="hljs"><code><div>		<span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"canvas"</span>);
		<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);
		
		<span class="hljs-comment">//设置线性渐变</span>
		<span class="hljs-comment">// let linearGradient=ctx.createLinearGradient(0,0,200,0)</span>
		<span class="hljs-comment">// let linearGradient=ctx.createLinearGradient(0,0,0,200)</span>
		<span class="hljs-keyword">let</span> linearGradient=ctx.createLinearGradient(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
		linearGradient.addColorStop(<span class="hljs-number">0</span>,<span class="hljs-string">"red"</span>)
		linearGradient.addColorStop(<span class="hljs-number">0.5</span>,<span class="hljs-string">"orange"</span>)
		linearGradient.addColorStop(<span class="hljs-number">1</span>,<span class="hljs-string">"green"</span>)
		

		
		<span class="hljs-comment">//绘制矩形</span>
		<span class="hljs-comment">// ctx.fillStyle="red"</span>
		ctx.fillStyle=linearGradient;
		ctx.fillRect(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
</div></code></pre>
<h3 id="34createradialgradient%E6%94%BE%E5%B0%84%E6%80%A7%E6%B8%90%E5%8F%98">3.4createRadialGradient放射性渐变</h3>
<pre class="hljs"><code><div><span class="hljs-comment">//设置径向渐变</span>
<span class="hljs-keyword">let</span> radialGradient=ctx.createRadialGradient(<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>)
radialGradient.addColorStop(<span class="hljs-number">0</span>,<span class="hljs-string">"orangered"</span>);
radialGradient.addColorStop(<span class="hljs-number">1</span>,<span class="hljs-string">"green"</span>);
</div></code></pre>
<p><strong>代码案例</strong></p>
<p><img src="images/image-20210319100107369.png" alt="image-20210319100107369"></p>
<pre class="hljs"><code><div><span class="hljs-keyword">let</span> canvas=<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"canvas"</span>);
<span class="hljs-keyword">let</span> ctx=canvas.getContext(<span class="hljs-string">"2d"</span>);

<span class="hljs-comment">//设置径向渐变</span>
<span class="hljs-keyword">let</span> radialGradient=ctx.createRadialGradient(<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>)
radialGradient.addColorStop(<span class="hljs-number">0</span>,<span class="hljs-string">"orangered"</span>);
radialGradient.addColorStop(<span class="hljs-number">1</span>,<span class="hljs-string">"green"</span>);

<span class="hljs-comment">//绘制圆</span>
ctx.translate(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>)
ctx.arc(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI*<span class="hljs-number">2</span>,<span class="hljs-literal">false</span>)
<span class="hljs-comment">// ctx.fillStyle="orangered"</span>
ctx.fillStyle=radialGradient;
ctx.fill()

</div></code></pre>
<h2 id="5%E9%92%9F%E8%A1%A8%E6%A1%88%E4%BE%8B">5.钟表案例</h2>
<p><strong>代码案例</strong></p>
<h1 id="%E4%B8%80canvas%E9%92%9F%E8%A1%A8%E6%A1%88%E4%BE%8B">一、canvas钟表案例</h1>
<p>页面：</p>
<p>​	 秒针刻度：</p>
<p>​		使用arc ，循环生成60个扇形，每个隔6度</p>
<p>​	时针刻度：</p>
<p>​		使用arc ，循环生成12个扇形，每个隔30度</p>
<p>时针、分钟、秒针</p>
<p>​		使用arc, 开始弧度和结束弧度相同，绘制扇形，就是一条直线</p>
<p>时间刻度：</p>
<p>​		fillText（&quot;III&quot;, x,y）  /  strokeText()</p>
<p>​		改变当前canvas 原点坐标--  圆心</p>
<p>​		Math.sin(弧度).斜边 =  对边（Y）</p>
<p>​		Math.cos(弧度).斜边 = 临边 （X）</p>
<p>获取时间对象：</p>
<p>​	  let  t  =new  Date();</p>
<p>​		获取时分秒  h  m  s</p>
<p>使用时分秒生成度数，付给当前时针，分针，秒针</p>
<p><img src="images/image-20210319144355288.png" alt="image-20210319144355288"></p>
<p><strong>代码案例</strong></p>
<p><img src="images/image-20210319135730196.png" alt="image-20210319135730196"></p>
<pre class="hljs"><code><div>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
            &lt;title&gt;&lt;/title&gt;
&lt;style type="text/css"&gt;
    canvas{border: 1px solid #333;}
        &lt;/style&gt;
           &lt;/head&gt;
           &lt;body&gt;
            &lt;canvas width="600" height="400"&gt;&lt;/canvas&gt;
           &lt;/body&gt;
           &lt;script type="text/javascript"&gt;
               let canvas=document.querySelector("canvas");
           let ctx=canvas.getContext("2d");

           let R=200;

           ctx.translate(300,200)


           function staticClock(){


               //绘制大圆
               ctx.beginPath()
               ctx.arc(0,0,R,0,Math.PI*2,false);
               ctx.lineWidth=6
               ctx.stroke()

               // //绘制第1条线

               // ctx.save()
               // ctx.rotate(0*6*Math.PI/180)
               // 	ctx.beginPath()
               // 	ctx.moveTo(0,0)
               // 	ctx.lineTo(0,-R)
               // 	ctx.lineWidth=2;
               // 	ctx.stroke()
               // ctx.restore()

               // //绘制第2条线
               // ctx.beginPath()
               // ctx.save()
               // ctx.rotate(6*1*Math.PI/180)
               // 	ctx.moveTo(0,0)
               // 	ctx.lineTo(0,-R)
               // 	ctx.lineWidth=2;
               // 	ctx.stroke()
               // ctx.restore()

               // //绘制第3条线
               // ctx.beginPath()
               // ctx.save()
               // ctx.rotate(6*2*Math.PI/180)
               // 	ctx.moveTo(0,0)
               // 	ctx.lineTo(0,-R)
               // 	ctx.lineWidth=2;
               // 	ctx.stroke()
               // ctx.restore()


               // //绘制第3条线
               // ctx.beginPath()
               // ctx.save()
               // ctx.rotate(6*3*Math.PI/180)
               // 	ctx.moveTo(0,0)
               // 	ctx.lineTo(0,-R)
               // 	ctx.lineWidth=2;
               // 	ctx.stroke()
               // ctx.restore()

               //绘制分针刻度
               function minuteMark(i){
                   ctx.beginPath()
                   ctx.save()
                   ctx.rotate(6*i*Math.PI/180)
                   ctx.moveTo(0,0)
                   ctx.lineTo(0,-R)
                   ctx.lineWidth=2;
                   ctx.stroke()
                   ctx.restore()
               }

               for(let i=0;i&lt;60;i++){
                   minuteMark(i)
               }

               //绘制白色圆覆盖辐射线
               ctx.beginPath()
               ctx.arc(0,0,R-10,0,Math.PI*2,false)
               ctx.fillStyle="white"
               ctx.fill()

               //绘制辐射线
               // ctx.save()
               // ctx.rotate(0*30*Math.PI/180)
               // 	ctx.beginPath()
               // 	ctx.moveTo(0,0)
               // 	ctx.lineTo(0,-R)
               // 	ctx.stroke()
               // ctx.restore()

               // ctx.save()
               // ctx.rotate(1*30*Math.PI/180)
               // 	ctx.beginPath()
               // 	ctx.moveTo(0,0)
               // 	ctx.lineTo(0,-R)
               // 	ctx.stroke()
               // ctx.restore()

               // ctx.save()
               // ctx.rotate(2*30*Math.PI/180)
               // 	ctx.beginPath()
               // 	ctx.moveTo(0,0)
               // 	ctx.lineTo(0,-R)
               // 	ctx.stroke()
               // ctx.restore()

               //绘制时针刻度
               function markHour(i){
                   ctx.save()
                   ctx.rotate(i*30*Math.PI/180)
                   ctx.beginPath()
                   ctx.moveTo(0,0)
                   ctx.lineTo(0,-R)
                   ctx.stroke()
                   ctx.restore()
               }

               for(let i=0;i&lt;12;i++){
                   markHour(i)
               }

               //绘制白色圆，覆盖辐射线
               ctx.beginPath()
               ctx.arc(0,0,R-20,0,Math.PI*2,false);
               ctx.fillStyle="white"
               ctx.fill()

               //求值文字的坐标
               let r=R-40;



               // ctx.beginPath()
               // let x0=r*Math.cos(0*Math.PI/180)
               // let y0=r*Math.sin(0*Math.PI/180)

               // ctx.textAlign="center";			//水平对齐
               // ctx.textBaseline="middle"		//竖直对齐
               // ctx.font="20px Arial"
               // ctx.fillStyle="#000"
               // ctx.fillText("III",x0,y0)



               // ctx.beginPath()
               // let x1=r*Math.cos(30*Math.PI/180)
               // let y1=r*Math.sin(30*Math.PI/180)

               // ctx.textAlign="center";			//水平对齐
               // ctx.textBaseline="middle"		//竖直对齐
               // ctx.font="20px Arial"
               // ctx.fillStyle="#000"
               // ctx.fillText("IV",x1,y1)


               // ctx.beginPath()
               // let x2=r*Math.cos(60*Math.PI/180)
               // let y2=r*Math.sin(60*Math.PI/180)

               // ctx.textAlign="center";			//水平对齐
               // ctx.textBaseline="middle"		//竖直对齐
               // ctx.font="20px Arial"
               // ctx.fillStyle="#000"
               // ctx.fillText("V",x2,y2)

               //绘制文字
               function text(i){
                   let arr=["III","IV","V","VI","VII","VIII","IX","X","XI","XII","I","II"]
                   ctx.beginPath()
                   let x=r*Math.cos(i*30*Math.PI/180)
                   let y=r*Math.sin(i*30*Math.PI/180)

                   ctx.textAlign="center";			//水平对齐
                   ctx.textBaseline="middle"		//竖直对齐
                   ctx.font="20px Arial"
                   ctx.fillStyle="#000"
                   ctx.fillText(arr[i],x,y)
               }

               // text(2)
               for(let i=0;i&lt;12;i++){
                   text(i)
               }


               //绘制logo
               ctx.beginPath()
               ctx.fillText("Daniel Wellington",0,-80)
           }


           //绘制红点
           function dot(){
               ctx.beginPath()
               ctx.arc(0,0,5,0,Math.PI*2,false);
               ctx.fillStyle="red";
               ctx.fill()

           }

           //绘制静止的表盘
           staticClock()


           //绘制秒针
           function lineSecond(){
               //清除表盘和秒针
               ctx.clearRect(-R,-R,2*R,2*R)

               //绘制表盘
               staticClock()
               //绘制新的秒针
               let nowtime=new Date()
               let second=nowtime.getSeconds()
               ctx.save()
               ctx.rotate(second*6*Math.PI/180)
               ctx.beginPath()
               ctx.moveTo(0,40)
               ctx.lineWidth=2;
               ctx.strokeStyle="blue"
               ctx.lineTo(0,-R+30);
               ctx.stroke()
               ctx.restore()

               //圆心红点
               // dot()
           }




           //绘制分针：每分钟走6度。获取到当前的分钟数，换算成角度进行旋转
           function minuteLine(){
               let minute=new Date().getMinutes()
               ctx.save()
               ctx.rotate(minute*6*Math.PI/180)
               ctx.beginPath()
               ctx.moveTo(0,25)
               ctx.lineTo(0,-R+50)
               ctx.strokeStyle="#000"
               ctx.stroke()

               ctx.restore()

               // dot()

           }

           //绘制时针
           function hourLine(){
               let hour=new Date().getHours()
               let minute=new Date().getMinutes()

               ctx.save()
               ctx.rotate(hour*30*Math.PI/180+minute*0.5*Math.PI/180)
               ctx.beginPath()
               ctx.moveTo(0,20)
               ctx.lineTo(0,-R+75)
               ctx.stroke()

               ctx.restore()

               dot()
           }


           //页面加载，绘制秒针
           lineSecond()
           minuteLine()
           hourLine()

           //每一秒，绘制秒针
           setInterval(()=&gt;{
               lineSecond()
               minuteLine()
               hourLine()

           },1000)




           // setInterval(()=&gt;{
           // 	let minute=new Date().getMinutes()
           // 	ctx.save()
           // 	ctx.rotate(minute*6*Math.PI/180)
           // 		ctx.beginPath()
           // 		ctx.moveTo(0,20)
           // 		ctx.lineTo(0,-R+30)
           // 		ctx.strokeStyle="#000"
           // 		ctx.stroke()

           // 	ctx.restore()
           // },1000)


           //圆心红点
           dot()
           &lt;/script&gt;
           &lt;/html&gt;
</div></code></pre>
<h1 id="%E4%BA%8Csvg%E7%BB%98%E5%9B%BE">二、svg绘图</h1>
<h2 id="1svg%E6%A6%82%E5%BF%B5">1.svg概念</h2>
<p>​		SVG 是使用 XML 来描述二维图形和绘图程序的语言。可伸缩矢量图，图像在放大或改变尺寸的情况下其图形质量不会有所损失。</p>
<h2 id="2svg%E5%BC%95%E5%85%A5%E5%8F%8A%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C">2.svg引入及基本操作</h2>
<h3 id="21svg%E5%BC%95%E5%85%A5">2.1svg引入</h3>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">svg</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
</div></code></pre>
<h3 id="22%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C">2.2基本操作</h3>
<h2 id="3svg%E5%B8%B8%E8%A7%81%E7%BB%98%E5%9B%BE%E6%A0%87%E7%AD%BE">3.svg常见绘图标签</h2>
<pre class="hljs"><code><div>&lt;rect&gt;     绘制矩形 
	x,y 矩形绘制的起始位置、 width,height 矩形的宽高、fill颜色值 填充、stroke=&quot;颜色&quot; 描边
	stroke-width 线宽 、rx，ry  圆角大小	
&lt;line&gt;     线 
	x1,y1  起始点  、	x2,y2   终点
&lt;polyline&gt; 折线 
	points 集合
		=&quot;x1,y1  x2,y2  x3,y3 ...&quot;
		=&quot;x1 y1,x2 y2,...&quot;
&lt;circle&gt;   圆形 
		cx,cy,r 圆心和半径
</div></code></pre>
<p>代码</p>
<p><img src="images/image-20210319145108666.png" alt="image-20210319145108666"></p>
<pre class="hljs"><code><div><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>&gt;</span><span class="css">
			<span class="hljs-selector-tag">svg</span>{<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#333</span>;}
		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"600"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"400"</span>&gt;</span>
			<span class="hljs-tag">&lt;<span class="hljs-name">line</span> <span class="hljs-attr">x1</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">y1</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">x2</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">y2</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">"red"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"10"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">line</span>&gt;</span>
			
		<span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>

</div></code></pre>
<p><strong>矩形</strong></p>
<p><img src="images/image-20210319145438136.png" alt="image-20210319145438136"></p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">rect</span> <span class="hljs-attr">x</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">y</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"tomato"</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">"blue"</span> 
      <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"10"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">rect</span>&gt;</span>
</div></code></pre>
<p><strong>圆形</strong></p>
<p><img src="images/image-20210319145631541.png" alt="image-20210319145631541"></p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">circle</span> <span class="hljs-attr">cx</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">r</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"none"</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">"blue"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">circle</span>&gt;</span>
</div></code></pre>
<p><strong>折线</strong></p>
<p><img src="images/image-20210319150244688.png" alt="image-20210319150244688"></p>
<pre class="hljs"><code><div>
<span class="hljs-tag">&lt;<span class="hljs-name">polyline</span> <span class="hljs-attr">points</span>=<span class="hljs-string">"100 100 200 200 300 100 400 200 500 100"</span> 
          <span class="hljs-attr">fill</span>=<span class="hljs-string">"none"</span> 
          <span class="hljs-attr">stroke</span>=<span class="hljs-string">"red"</span>
          <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"10"</span>
</span></div></code></pre>
<h2 id="4svg%E6%B8%90%E5%8F%98%E6%95%88%E6%9E%9C">4.svg渐变效果</h2>
<h3 id="41lineargradient-%E7%BA%BF%E6%80%A7-%E6%B8%90%E5%8F%98">4.1linearGradient  线性 渐变</h3>
<pre class="hljs"><code><div>id       唯一标识
x1,y1    渐变起始的位置   百分比  或者  0-1 小数
x2，y2   渐变结束的位置
&lt;linearGradient id=&quot;lg&quot; x1=&quot;&quot; y1=&quot;&quot; x2=&quot;&quot; y2=&quot;&quot;&gt;
	&lt;stop offset=&quot;0%&quot; stop-color=&quot;red&quot;&gt;&lt;/stop&gt;
	&lt;stop offset=&quot;100%&quot; stop-color=&quot;blue&quot;&gt;&lt;/stop&gt;
&lt;/linearGradient&gt;

&lt;rect x=&quot;50&quot; y=&quot;50&quot; width=&quot;100px&quot; height=&quot;100px&quot; style=&quot;fill: url(#lg);&quot;&gt;&lt;/rect&gt; 使用渐变
</div></code></pre>
<p><strong>代码案例</strong></p>
<p><img src="images/image-20210319151749403.png" alt="image-20210319151749403"></p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">defs</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">linearGradient</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"grad1"</span> &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">stop</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"0%"</span> <span class="hljs-attr">stop-color</span>=<span class="hljs-string">"red"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">stop</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">stop</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"100%"</span> <span class="hljs-attr">stop-color</span>=<span class="hljs-string">"blue"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">stop</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">linearGradient</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">defs</span>&gt;</span>


<span class="hljs-tag">&lt;<span class="hljs-name">rect</span> <span class="hljs-attr">x</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">y</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"url(#grad1)"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">rect</span>&gt;</span>
</div></code></pre>
<h3 id="42radialgradient-%E6%94%BE%E5%B0%84%E6%80%A7%E6%B8%90%E5%8F%98">4.2radialGradient 放射性渐变</h3>
<pre class="hljs"><code><div>id     唯一标识
cx,cy  外圆圆心位置
r      外圆半径
fx,fy  内圆圆心
</div></code></pre>
<p>代码</p>
<p><img src="images/image-20210319153947531.png" alt="image-20210319153947531"></p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">defs</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">radialGradient</span> 
                    <span class="hljs-attr">id</span>=<span class="hljs-string">"grad2"</span> 
                    <span class="hljs-attr">fx</span>=<span class="hljs-string">"0.5"</span> <span class="hljs-attr">fx</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">"0.5"</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">"0.5"</span> <span class="hljs-attr">r</span>=<span class="hljs-string">".5"</span>
                    &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">stop</span> <span class="hljs-attr">stop-color</span>=<span class="hljs-string">"blue"</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"0%"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">stop</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">stop</span> <span class="hljs-attr">stop-color</span>=<span class="hljs-string">"orange"</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"100%"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">stop</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">radialGradient</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">defs</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">circle</span> <span class="hljs-attr">cx</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">r</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"url(#grad2)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">circle</span>&gt;</span>
</div></code></pre>
<h2 id="5%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%BB%83%E4%B9%A0">5.柱状图练习</h2>
<h3 id="1%E6%B0%B4%E5%B9%B3%E6%9F%B1%E7%8A%B6%E5%9B%BE">1.水平柱状图</h3>
<p><img src="images/image-20210319155123987.png" alt="image-20210319155123987"></p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"600"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"400"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">g</span> <span class="hljs-attr">transform</span>=<span class="hljs-string">"translate(0,50)"</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"#ed1c24"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">rect</span>  <span class="hljs-attr">x</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">y</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"120"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"30"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">rect</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">rect</span>  <span class="hljs-attr">x</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">y</span>=<span class="hljs-string">"80"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"180"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"30"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">rect</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">rect</span> <span class="hljs-attr">x</span>=<span class="hljs-string">"0"</span>   <span class="hljs-attr">y</span>=<span class="hljs-string">"160"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"240"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"30"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">rect</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">rect</span> <span class="hljs-attr">x</span>=<span class="hljs-string">"0"</span>   <span class="hljs-attr">y</span>=<span class="hljs-string">"240"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"420"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"30"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">rect</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">g</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
</div></code></pre>
<h1 id="%E4%B8%89d3js%E7%BB%98%E5%9B%BE%E5%B7%A5%E5%85%B7">三、d3js绘图工具</h1>
<h2 id="1d3%E5%B7%A5%E5%85%B7%E6%A6%82%E8%BF%B0">1.d3工具概述</h2>
<p>​	d3是数据可视化的操作的库，支持节点操作、事件操作、链式操作！！！</p>
<h2 id="2%E5%B7%A5%E5%85%B7%E5%AE%89%E8%A3%85%E5%8F%8A%E5%BC%95%E5%85%A5">2.工具安装及引入</h2>
<p>​	npm install   d3@3</p>
<h2 id="3d3%E5%9F%BA%E6%9C%AC%E5%B1%9E%E6%80%A7%E5%8F%8A%E6%96%B9%E6%B3%95">3.d3基本属性及方法</h2>
<h3 id="31%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9">3.1元素选择</h3>
<pre class="hljs"><code><div>d3.select()		//选择第1个元素
d3.selectAll()		//选择所有元素
</div></code></pre>
<h3 id="32%E7%BB%91%E5%AE%9A%E6%95%B0%E6%8D%AE">3.2绑定数据</h3>
<ul>
<li>页面元素和数据能够对应上的部分：update</li>
<li>数据比页面元素多余的部分：enter</li>
<li>页面元素比数据多余的部分：exit<img src="images/image-20210319162406326.png" alt="image-20210319162406326"></li>
</ul>
<pre class="hljs"><code><div>d3.selectAll(<span class="hljs-string">"p"</span>).data(arr).enter()
	.append(<span class="hljs-string">"p"</span>)
	.text(item=&gt;{
		return item;
	})
</div></code></pre>
<h2 id="4svgd3%E7%BB%98%E5%88%B6%E7%AE%80%E6%98%93%E6%9F%B1%E7%8A%B6%E5%9B%BE">4.svg+d3绘制简易柱状图</h2>
<p><img src="images/image-20210319170908136.png" alt="image-20210319170908136"></p>
<p><strong>代码案例</strong></p>
<pre class="hljs"><code><div><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./static/d3.v3.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>	
		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>&gt;</span><span class="css">
			<span class="hljs-selector-tag">svg</span>{<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#333</span>;}
		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
			<span class="hljs-built_in">window</span>.onload=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
				<span class="hljs-comment">//准备数据</span>
				<span class="hljs-keyword">let</span> arr=[<span class="hljs-number">60</span>,<span class="hljs-number">90</span>,<span class="hljs-number">120</span>,<span class="hljs-number">210</span>]
				
				<span class="hljs-comment">//线性比例尺</span>
				<span class="hljs-keyword">let</span> linearScale=d3.scale.linear()
							.domain([<span class="hljs-number">0</span>,<span class="hljs-number">210</span>])
							.range([<span class="hljs-number">0</span>,<span class="hljs-number">580</span>])
				
				
				<span class="hljs-comment">//添加svg</span>
				<span class="hljs-keyword">let</span> svg=d3.select(<span class="hljs-string">"body"</span>).append(<span class="hljs-string">"svg"</span>)
					.attr(<span class="hljs-string">"width"</span>,<span class="hljs-number">600</span>)
					.attr(<span class="hljs-string">"height"</span>,<span class="hljs-number">400</span>)
				
				<span class="hljs-keyword">let</span> group=svg.append(<span class="hljs-string">"g"</span>)
						.attr(<span class="hljs-string">"transform"</span>,<span class="hljs-string">"translate(0,60)"</span>)
				
				<span class="hljs-comment">//绑定数据</span>
				group.selectAll(<span class="hljs-string">"rect"</span>).data(arr).enter()
					.append(<span class="hljs-string">"rect"</span>)
					.attr(<span class="hljs-string">"x"</span>,<span class="hljs-number">0</span>)
					.attr(<span class="hljs-string">"y"</span>,(item,index)=&gt;{
						<span class="hljs-keyword">return</span> index*<span class="hljs-number">80</span>
					})
					.attr(<span class="hljs-string">"width"</span>,(item,index)=&gt;{
						<span class="hljs-comment">// return item;</span>
						<span class="hljs-keyword">return</span> linearScale(item)
					})
					.attr(<span class="hljs-string">"height"</span>,()=&gt;{
						<span class="hljs-keyword">return</span> <span class="hljs-number">30</span>
					})
					.attr(<span class="hljs-string">"fill"</span>,<span class="hljs-string">"tomato"</span>)
				
			}	
		</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
	
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>

</div></code></pre>
<p>练习</p>
<p><img src="images/image-20210319171326654.png" alt="image-20210319171326654"></p>

</body>
</html>
